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

: Coding 【たぶん1分で読み終わるです】

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

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

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

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だとどうなってるのかは調べてない。

一緒に使うと便利

はてブであさってたら出てきたやつです。

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