before,after疑似要素を使ってCSSだけで角丸を実現する

CSSだけで角丸を実現するスマートな方法。

角丸と言うと、テーブル使ったり、Javascript使ったり、余計なタグ書いたりして実現していることが多いんですが、そういう面倒で(コードが)美しくない方法 ではありません

基本的にCSSと画像だけで実現します。ブロック要素ひとつ使うだけで、あとは余計なものは一切ありません。というわけでサンプル。

HTMLが非常に手抜きかついい加減なのは突っ込まないでください。(正直かくのが面倒だった)

どうやって角丸にしているかはソース見てもらった方が早いですが、

.round:before {
display : block ;
content : url("./nw.gif") ;
background : transparent url("./ne.gif") no-repeat scroll 100% 0% ;
}

な感じで指定しています。ちなみにサンプルにも書いてありますが、before疑似要素とafter疑似要素を使っているため、Internet Explorer6みたいにCSSの実装がアレだとうまいこといきません。

たぶん、

  • Firefox
  • Opera
  • Safari

あたりの最新版でうまいこと表示できるとは思いますが、WinXPのFirefox2でしか表示確認してないため他がどうなってるかは知りません。

元ネタ

caramel*vanillaのエントリCSSでドロップ&シャドウでlomoさんが紹介されていた Drop Shadow CSSがbefore,after疑似要素を使っているのをみて、「これで角丸できるんじゃね?」と思ってやってみたらできた。という話です。

ぶっちゃけどこかの誰かがすでにやってるような気がする。あとIE(Internet Explorer)だと動かない。IE--。IE7だとどうなってるのかは調べてない。

一緒に使うと便利

角丸ジェネレータらしいです。便利。

nyarla が大体

Scrapbox でコメントや意見を書く