はい、今回はCSSで三角形を作る方法と、なぜそうなるのか？理屈についてまとめてみたいと思います。
疑似クラスの、:beforeや:afterに使うと吹き出しなどの三角形を表現するのに画像を使わずにできて、しかもロールオーバーなんかにも対応できちゃいます！
コピペだけではカスタマイズする時に困ってしまいますので、なぜCSSで三角になるのか覚えておくと便利です。簡単なので、ぜひ覚えてみてください。
まずは、こちらをご覧ください。
width、hightを0にして、ボーダーを設定してみる
.sample_triangle01 {width:0; height:0; border-width:10px; border-style:solid; border-color:#00F #F90 #0C0 #F00;}
CSSを見ておわかりいただけるように、widthとhightを0としています。
その場合、ボーダーに幅を付けてあげることによって、このような四角形が表現できるようになります。
ここではわかりやすく色分けしてみましたが、これが三角にするヒントとなります。
では単純に三角形にしたい箇所以外をtransparentで透明にしてみましょう。
.sample_triangle02 {width:0; height:0; border-width:10px; border-style:solid; border-color:#00F transparent transparent;}
これがCSSで三角を表現する理屈です。
高さ・幅の無いボックスに線があるというのは、CSSハックのようにも思えますが、色々なブラウザでも表示できる記述です。（※IEは8以降対応）
疑似クラスを利用して吹き出しに
今まで画像を背景に使用したりと、ちょっと表現に面倒だった吹き出しもこれだと簡単に表現することができますね。
ロールオーバーにもCSSで対応できるので便利です。
.sample_triangle03 {position:relative; display:table;}
.sample_triangle03 a {padding:10px; border-radius:8px; background:#00F; color:#fff; text-decoration:none;}
.sample_triangle03 a:after {width:0; height:0; content:""; border-width:8px; border-style:solid; border-color:#00F transparent transparent; position:absolute; bottom:-22px; left:50%;}
.sample_triangle03 a:hover {opacity:0.5;}
線だけの吹き出しもCSSで三角をbefore、afterでずらすだけ！
.sample_triangle04 {padding:10px; border:solid 1px #999; border-radius:8px; text-decoration:none; position:relative; display:table;}
.sample_triangle04:before {width:0; height:0; content:""; border-width:8px; border-style:solid; border-color:#fff transparent transparent; position:absolute; bottom:-12px; left:50%; z-index:100;}
.sample_triangle04:after {width:0; height:0; content:""; border-width:8px; border-style:solid; border-color:#999 transparent transparent; position:absolute; bottom:-15px; left:50%;}
三角の場所を変えてあげるだけで色々な吹き出しが表現できますね。編集などの管理も楽になります。
リストなんかにも使えます
.sample_triangle05 {margin:0 0 10px; padding:0 0 0 15px; position:relative;}
.sample_triangle05:before {width:6px; height:6px; content:""; border-width:2px 2px 0 0; border-style:solid; border-color:#f00 #00f transparent transparent; position:absolute; bottom:9px; left:0px; transform: rotate(45deg);}
transformで角度を変えることによってリストマークにも使えます。
私はWebアイコンフォントなんかも便利で使ってますが、このような使い方もできるんですね！
Webアイコンフォントではこちらがお気に入りでよく使っています。
CSSで作る三角形についてまとめ
簡単ですがCSSで三角形を作る方法となぜそうなるのか？をまとめてみましたが、他にもこの三角を使って色々な表現方法ができるようなので、ぜひ探してみてください！
画像を使わないので更新が楽ですよー！
【追記】モバイルにCSSが反映していなかったので、対応しました。
はてなブログをレスポンシブにしていない場合、別CSSが読み込まれるため、管理画面のデザイン＞スマートフォン＞ヘッダ＞タイトル下という項目の、「スマートフォン用にHTMLを設定する」にチェックを入れ、モバイル用のCSSを記述すると反映されます。
