ezorisu-web

2009.01.16.

角を丸める応用編

前回の「角を丸めてみる」という記事で、p要素の範囲に色を付けて、四隅を丸める基本形を作ってみました。

この:beforeや:afterを使ったデザインは、なかなかおもしろくて簡単にいろいろな応用が利きそうなので、いくつかやってみます。

まずは、角を丸めたラインで囲ってみます。
用意するのは、Rラインの画像4枚。 R左上 R右上 R左下 R右下

p要素を単純にボーダーラインで囲ってあげて、そのままだと四角い枠なので四隅にそれぞれボーダーと同色のRライン画像をボーダーにかぶせるように配置してやればOK。方法は「角を丸めてみる」の記事で書いたのと同じ。

HTML<p class="r-line">この部分が囲みたい文章の中身です。</p>

CSSp.r-line {
    padding: 0 15px;
    border: 2px solid #a0410d;    
}

p.r-line:before {
    content: url("images/r-line-tl.gif");
    display: block;
    background-image: url("images/r-line-tr.gif");
    background-repeat: no-repeat;
    background-position: top right;
    margin: -2px -17px 0;
}

p.r-line:after {
    content: url("images/r-line-bl.gif");
    display: block;
    background-image: url("images/r-line-br.gif");
    background-repeat: no-repeat;
    background-position: bottom right;
    margin: 0 -17px -2px;
}

例えば、エゾリス枠こんな画像を作って:beforeの中に入れて位置を調整してあげれば、