画像を使わずに角丸ボックス

http://pro.html.it/esempio/nifty/（英語） というところで、画像を一切使わずに角丸ボックスを作る方法を紹介していたので、うちでも紹介（一部改変）。 実用性はともかく、こんなこともできるんです。

やり方

HTMLはこんな感じになります。

<div class="sample">
<div class="rtop">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<p>
画像を一切使わずに角丸のボックスを作ることも可能です。でもソースは複雑だし、文法もいい加減。 あまり使い道は無いかも。 </p>
<div class="rbottom">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>

スタイルシートはこんな感じになります。

.sample {
    width:250px;
    background-color:#CCCCEB;
}
.sample p{
    margin:0px;
    padding:0.5em 1em;
    background-color:#CCCCEB;
}
.rtop, .rbottom{
    background:#FFFFFF;
}
.rtop span, .rbottom span{
    display:block;
    height:1px;
    overflow:hidden;
    background-color:#CCCCEB;
}
.r1{margin: 0px 5px;}
.r2{margin: 0px 3px;}
.r3{margin: 0px 2px;}
.r4{margin: 0px 1px; height: 2px;}

rtopとrbottomの部分で角丸を作っています。 中に入れたspanのマージンを変えていくことで擬似的に丸く見えるようになっています。 spanの数が増えれば増えるほどスムーズな曲線に見えます。

今回のポイントは.rtop span, .rbottom spanに設定したスタイルです。ひとつでも欠けるとうまくいきません。

.rtop, .rbottomに設定する背景色は、ページの背景色と同じか近いものを選んでください。

---

使いこなすための＋α

本家のサイトでは自動的に角丸部分のソースを挿入するスクリプトを紹介しているようなので、 本気で取り入れようと考えている人は一読を。

---