CSSで三角形を表現する時、
CSSプロパティのborderを使うのか、原理をあまり意識してなかったので改めて深掘りをしてみた！
borderが単一の時と複数の時での動き
一本の時
width: 100px;
height: 50px;
border-top: 5px solid;
display: inline-block;
まぁ予想通りの結果ですね、ただ横に線が引かれているだけ
複数本の時
border: 5px solid;
これも予想通りの結果、けどこれがどこに三角の要素があるんだと考える・・・
試しに上下左右に色をつけてみた。
border: 5px solid;
border-color: red blue;
繋ぎ目が斜めになっている！三角を作る上での兆しが見えてきた！
たしかに縦と横の繋ぎ目がどうなっているかなんてあんまり考えてなかったなと探究心のなさに今更ショックを覚えつつw
borderの動きを踏まえてよくある三角を作成
- 1本の場合は、繋ぎ目が並行または垂直に切られる
- 複数本の場合は、繋ぎ目が斜めに切られる
ということは見えないborderを用意するんだということに行き着く
↓
height: 5px;
border: 5px solid;
border-color: transparent transparent transparent blue;
box-sizing: border-box; /* 要素のwidth/height内にborderも含める */
borderの幅に合わせて高さを指定し、三角形になった！！
これを応用すれば上下左右どの三角形も作れますね！！
borderの動きを踏まえてよくある”くの字”を作成
今回のborderの原理は不要ですが、
2本のborderがあれば”くの字”の矢印も作れるので、合わせて記載しておく
↓
width: 10px;
height: 10px;
margin: 50px;
border-top: 5px solid black;
border-right: 5px solid black;
transform: rotate(45deg); /* 上と右のborderを45°回ることで右矢印に */
display: inline-block;
最後に
CSSのテクニック集とかを参考に使うこともありますが、
なぜそのプロパティで実現できるのかっていうことを見ていくのが改めて大事だなと今更痛感することが多くあります。
(脳死コピペをしてしまうことが多かったので、やっちまったなぁと後悔が残る・・・)
表現が可能になるための根拠が必ずあるはずなので私のように後悔が残る前に、
どんどんWhy(なぜ)に直面し調べていくことをすすめて行ってみてください！
最近はclip-pathで三角形を実現できるみたいなので、
そちらも知識として貯めていきたいなと思います！