1. 擬似要素を用いる
    1. メリット
    2. デメリット
  2. ソース
  3. サンプル
  4. トラックバック
更新日時
2009-02-12 19:05
永続的 URI
http://www.code-404.net/articles/css/round-box
タグ

擬似要素を用いる

::before, ::after の擬似要素を用いて、その内容に一角の丸まった画像を指定し、背景にもう一角の丸まった画像を指定します。これらを対象要素の前後に指定することで角が丸いボックスに見せることが可能です。

メリット

デメリット

ソース

この手法は HTML に一切の影響を及ぼさないため、 CSS のみ紹介します。

element::before,
element::after {
    line-height: 0;
    display: block;
}

element::before {
    content: url("この場合、左上の角丸画像");
    background: transparent url("この場合、右上の角丸画像") right top no-repeat;
    color: inherit;
}

element::after {
    content: url("この場合、左下の角丸画像");
    background: transparent url("この場合、右下の角丸画像") right bottom no-repeat;
    color: inherit;
}

UA が標準準拠モードで表示している場合、 line-height: 0; の記述が無ければ表示が崩れますので注意してください。互換モード時でも line-height: 0; が指定されていても問題は無いので、指定しておいた方が良いでしょう。

サンプル

3 種類の UA での表示例を画像で紹介します。

Firefox 1.5.0.4 for Windows
Firefox での表示
Opera 8.5 for Windows
Opera での表示
Internet Explorer 6.0 for Windows
IE での表示

サンプルページを作成してますので、ご覧ください。

トラックバック

トラックバック URI
http://www.code-404.net/cms/trackback/6
関連記事
検索

情報