好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

cssで三角形を表現する

見出しのデザインする時って、大体デザインのパターンが決まってますよね。
アイコン使ったり、下にボーダー引いたり、背景塗りつぶして文字を白抜きにしたり。

ボーダーや白抜きはCSS2だけで完結できちゃうんですが、アイコンを使う場合はbackground-image頼りになります。 ただアイコンを使うとメンテナンスがめんどくさくなるし、何よりHTTPリクエストを増やすという罪悪感に苛まれてるという… そのアイコンをCSSで表現できちゃえば画像を使う必要が無くなるよね、って話です。

サンプル

サンプルはこんな感じです。
この左側の三角形をCSSで表現しています。

f:id:ia_isier:20140406003444p:plain

最近知ったのですが、borderプロパティをうまく使えばできるっぽいですね。
borderプロパティの仕組みを理解できれば自然と使い方もわかってくるかと思います。

まずはborderプロパティの基本的な使い方から

borderプロパティを使うときって、だいたいこんな感じで使う機会が多いかと思います。

<div class="hoge">borderプロパティのサンプル1</div>
div.hoge {
    border: 2px solid blue;
}

f:id:ia_isier:20140406005438p:plain

borderプロパティのショートハンドで四辺のボーダーをまとめて指定してるんですよね。

それぞれの辺に色を付けてみる

今度は四辺それぞれに色を指定してみましょう。あと中身を空にして大きさを指定しちゃいます。

f:id:ia_isier:20140406015810p:plain

<div class="hoge"></div>
div.hoge {
    width: 30px;
    height: 30px;
    border: 25px solid;
    border-top-color: blue;
    border-right-color: red;
    border-bottom-color: orange;
    border-left-color: yellow;
    background: white;
}

f:id:ia_isier:20140406015810p:plain

borderを太くし、それぞれに色を指定することで四辺の枠がどのようにして描画されているのかがわかりやすくなったかと思います。
白い部分が要素(大きさ30px)になっています。

三角形をつくる

あとは簡単ですね。一辺だけ色を指定して、他辺は色を透明に、要素の大きさを0にしちゃえばいいんです。
htmlは変わりません。

<div class="hoge"></div>
div.hoge {
    width: 0;
    height: 0;
    border: 25px solid transparent;
    border-left-color: green;
}

f:id:ia_isier:20140406021619p:plain

まとめ

うまく説明できてるか不安ですが、
CSS擬似要素(:before,:after)やborderのサイズ、要素の大きさを変えることでデザインに幅が出てくるのではないかと思います。
下記サイトは非常に参考になりました。
CSSの擬似要素を使った見出しデザイン