吹き出しデザインの見出し
では早速、さきほどの仕組みを利用して、サンプル7のような吹き出しデザインの見出しを作ってみましょう。まず、左右のマージンに-10pxを指定して、#wrapperから、左右に10pxずつはみ出させます。
次に:after擬似要素を使って、要素の直後に空の内容を挿入します。:after擬似要素で作ったこの空の内容に、10ピクセルのボーダーを付け、上ボーダーのみに背景色と同じ色を指定すると、吹き出し風の下向きの三角形ができます。
図10：上ボーダーのみ色をつけて下向きの三角形を描く
後は、この三角形をpositionレイアウトで配置します。このとき、#sample07にposition: relativeを指定し、次に、さきほどの三角形にposition:absoluteを指定することで、#sampleを基準として絶対配置することができます。続いて、leftやbottomプロパティで位置調整をして完成です。
サンプル7／CSS（sample02.html）
#sample07 {
margin: 0 -10px 40px -10px; /* 左右マージンに-10px */
padding: 10px 20px;
font-size: 130%;
color: #333333;
background-color: #FFCCCC;
position: relative; /* 基準位置を指定 */
}
#sample07:after {
content: ""; /* 空の内容を挿入 */
position: absolute; /* 絶対位置へ配置 */
left: 50px;
bottom: -20px;
height: 0;
width: 0;
border: 10px solid transparent;
border-top-color: #FFCCCC; /* 上ボーダーのみ背景色と同じ色 */
}
図11：サンプル7（sample02.html）
箱型の見出し
サンプル8のような箱型のデザインは、:before擬似要素で、要素の直前に内容を作成し、幅を指定したうえで、border-bottomのみに色をつけることで、台形を作っています。
後は、さきほどと同じようにpositionレイアウトで、絶対配置して完成です。
図12：幅を指定し、下ボーダーのみ色をつけて台形を描く
サンプル8／CSS（sample02.html）
#sample08 {
margin: 0 -10px 30px -10px;
padding: 10px 20px;
font-size: 130%;
color: #333333;
background-color: #FFCCCC;
position: relative;
}
#sample08:before{
content: "";
position: absolute;
top: -20px;
left: 0;
width: 500px; /* 幅を指定 */
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-bottom-color: #FF9999; /* 下ボーダーのみ色をつける */
}
図13：サンプル8（sample02.html）
