【CSS・border】borderで三角形が作れる！？という事に今更びっくりした話
どうも！LSSです！！
↑こんな三角形が、CSSの、それもborderで描ける、というのを知ってびっくりした話です。
これ最初に見つけた人凄いな…！！
実はこの三角、あちこちのブログで使用されています
CSSで吹き出しを表現されているのをよく見かけますが、あのとんがった部分。
この「borderで三角を描く」方法で作られている事が多いです。
こういうやつですね
三角形のコード
<div style="
width: 0px; height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 90px solid orange;
"></div>
最初、このコードを見ても、どうしてこれで三角形が描けるのかさっぱり理解不能でした^^;
borderは上下左右それぞれで、太さや色を変えられますが、このコードは
border-left: 50px solid transparent;
左の枠線を幅50px、色は透明。
border-right: 50px solid transparent;
右の枠線を幅50px、色は透明。
border-bottom: 90px solid orange;
下の枠線を幅90px、色はオレンジ。
としているだけで、あくまでもborderは「四角形を囲むもの」であるハズ。
何がどうなって三角形になるんだろう？？
と、凄く疑問に感じました。
順を追って解明していきます
まず、縦横50pxの黄色い四角形を作ってみます
<div style="width: 50px; height: 50px; background-color: yellow;"> </div>
その四角形の上下左右に幅15pxのborderをつけてみます
今回、一括指定は使わず、top left right bottomそれぞれ指定する書き方で書いてみます。
<div style="width: 50px; height: 50px; background-color: yellow;
border-top: 15px solid orange;
border-left: 15px solid orange;
border-right: 15px solid orange;
border-bottom: 15px solid orange;
"> </div>
上下左右のborderの色を変えてみます
<div style="width: 50px; height: 50px; background-color: yellow;
border-top: 15px solid pink;
border-left: 15px solid green;
border-right: 15px solid blue;
border-bottom: 15px solid purple;
"> </div>
四隅の角がナナメに切れている、ってところが最大のミソです！！
下だけ残し、上左右のborderの色をtranparent（透明）にしてみます。
<div style="width: 50px; height: 50px; background-color: yellow;
border-top: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid purple;
"> </div>
要素自体のwidthとheightを0pxにし、背景色指定を削ります
<div style="width: 0px; height: 0px;
border-top: 15px solid transparent;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid purple;
"> </div>
こうすると三角になりましたね^^
border-topの指定を削り、border-bottomの幅を大きくしてみます
<div style="width: 0px; height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid purple;
"> </div>
この場合、border-topは不要なので削ってしまいます。
そしてborder-bottomの幅を大きくすると、いい形の三角になりました！！
こうして、borderで三角形が作れるんですね！
leftやrightの幅の数値もいじると、
こう、独特の傾きを持った三角も作れます^^
なお、border-imageとは組み合わせられないようです
border-imageと組み合わせられるかな？と試みてみましたが、どうやら無理っぽい？ようです^^;
borderのこの仕様に気づき、しかもこれで三角が描けるって最初に気づいた人、ほんと凄いな！！って感服しました。
CSS、アイデア次第で本来の用途と全く異なる効果を演出する事もできるんですね！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
