三角形を配置する
三角形の描き方が分かったら、次は配置方法を考えよう。:before 擬似要素を使うと、HTMLに不要なdiv要素などを追加することなくスマートに配置できる。
最初に、通常のテキストボックスを作成する。今回のサンプルでは基本のドッグイヤーデザインと、アレンジしたデザインの2種類を作成する。以下のようにp要素で2つのテキストボックスを用意しよう。
[HTML]
<p class="fold">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p> <p class="fold">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p>
[CSS]
.fold { position : relative; width : 480px; padding : 16px 24px; margin : 32px auto; color : #fff; background : #97C02F; overflow : hidden; }
次に、先ほど作成した三角形のデザインパーツを配置しよう。HTMLに手を加えずにCSSだけで三角形を表示するには、:before 擬似要素を利用する。
.fold:before { content : ""; border-width : 0 16px 16px 0; border-style : solid; border-color : #fff #fff #658E15 #658E15; background : #658E15; -webkit-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); -moz-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); }
:before/:after 擬似要素は CSS2で用意された擬似要素で、contentプロパティと組み合わせると、指定した場所に任意のスタイルでコンテントを生成できる。:beforeの場合は:で指定した要素の「前」に、:after の場合は指定した要素の「後」にコンテントを生成できる。 :before/:after 擬似要素は、 Internet Explorer 8以降、Safari、Opera、Chrome、Firefoxでサポートされている。
サンプル2では、content:"";で空のコンテントを生成し、生成したコンテントに対してCSSのborderプロパティを適用して三角形を描いている。三角形には少し立体感を持たせるため、box-shadowプロパティも適用した。
あとは、position : absolute;を追加し、位置をtop : 0;、right : 0;に指定すると三角形をボックスの右上に配置できる。これでドッグイヤーデザインの完成だ。
■サンプル2[CSS]
.fold:before { content : ""; position : absolute; top : 0; right : 0; border-width : 0 16px 16px 0; border-style : solid; border-color : #fff #fff #658E15 #658E15; background : #658E15; -webkit-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); -moz-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); }