角の丸い枠を作成する CSS編(1画像で行う)

ここでは、Teaser Boxと紹介されている枠の作り方を紹介します。

この方法は、枠組みの画像とBorderを使って角の丸い枠を実現しています。

用意する画像は、次のような画像です。

HTML,CSSは、次のように作成します。

<div id="teaser">
<h2>header</h2>
<p>
1画像で固定幅のカスタムコーナーを作成します。
</p>
</div>

* {
    margin: 0;
    padding: 0;
}
#Teaser {
    background: url(./img/custom_corners3.png) left bottom no-repeat;
    padding-bottom: 10px;
    width: 300px;
}
#Teaser h3 {
    margin: 0;
    padding: 7px 10px 3px 10px;
    background: url(./img/custom_corners3.png) left top no-repeat;
}
#Teaser p {
    border-left:1px solid #A0B7C3;
    border-right:1px solid #A0B7C3;
    padding:0 10px 0 10px;
    background-color:white;
}

h3要素の背景で上部の枠を作成し、div要素で下部の枠を作成します。 左右の枠線は、p要素にborder-left,border-rightを指定することで 垂直方向の伸びに対応します。 p要素の背景色を指定することでdiv要素にした背景の一部を見えないようにします。