2013/11/29

【CSSテクニック】CSSだけで三角形を作る方法

【CSSテクニック】CSSだけで三角形を作る方法

以前の記事、画像いらず!CSS3で作るおしゃれな見出しデザインでは様々な種類の見出しデザインをご紹介しました。
リボン風・吹き出し風のデザインに使った、CSSのみで三角形を作る方法をわかりやすく説明したいと思います。

目次

三角形の作り方

CSSで三角形を作るには、borderプロパティを使用します。
widthとheightが0のブロック要素に、borderプロパティを指定した場合の挙動は以下のようになります。

【例】

.sample {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px;
    border-color: transparent;
    border-right-color: #333;
    border-left-color: #333;
}

上記のようなCSSを適用するとこのようになります。

border-width: 100px;
border-color: transparent;

この指定で、それぞれに100pxの大きさを与え、transparentで透過させ見えなくしています。

border-right-color: #333;
border-left-color: #333;

すべて透過させた後、右と左だけに#333を指定し色を付けています。

サンプル

以前の記事で紹介した「リボン風見出し」の、

この部分の作り方をご紹介します。

上図の青色で塗られた部分のみを表示させる必要があります。
以下のCSSを指定すると青色部分のみを表示できます。

.sample {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 100px 0;
    border-color: transparent;
    border-right-color: #4887b3;
}

細かくみていきましょう。

border-width: 0 100px 100px 0;

この指定で上と左に0を指定しているので、

上図のように黒で塗りつぶした部分はなくなります。
そして残った右下部分すべてを

border-color: transparent;

で透明にし、

border-right-color: #4887b3;

で右側のみに色を指定しています。

こうしてできた三角形を、before要素・after要素で配置することによってリボン風の見出しなどを作成しています。

まとめ

三角形の作り方さえわかれば、before要素、after要素を使用することで、画像を使うことなく様々なデザインをCSSのみで作成できるようになります。
画像なしでの説明では少し理解しづらいテクニックなので、原理について少しでも理解していただけたら幸いです。