cssだけで画像を使わずに三角形を描画する方法について。
軽くググるとおそらくborderを使って実現する方法がヒットするはず。
そのまま使えば目的達成の場合がほとんどでしょうが、パッと見ただけじゃどうしてあれで三角形になるのか謎ですよね。
そこで、どんな原理で三角形を描画しているのかをご紹介します。
理屈がわかればデザインの微調整だってできるはず！
See the Pen triangle by ririli (@ririli) on CodePen.
サンプルは上か順を追って説明していきます。
まずはfirstクラス
border-topを引いただけです。
当然ですがただの棒ですね。
次にsecondクラス
border-rightをたしてみました。
勘が良い人はここで気づくかも？
続いてthirdクラス
borderを太くしてみました。
おや、 topとrightのborderが重なる箇所が斜めになってますね...
核心に近づくfourthクラス
leftとbottomもたして正方形に。
三角形の面影が見えてきましたね。
ついに三角形登場のfifthクラス
widthとheightを0にしてborderだけで全てが構成されるようにしました。
fourthクラスにあった真ん中の空間がなくなったことで斜めの線同士がくっついて見事三角形が出現しました。
いらないものは消したsixthクラス
今回は下向きの三角形だけ残したかったのでright, left, bottomのborderを透明に変更しました。
当然上むきにしたければbottomだけを残して残りを透明にします。
まとめ
以上がcssだけで三角形を描画する仕組みでした。
わかってしまえば単純。
原理がわかっていれば二等辺三角形にしてみたり、直角の位置を変えてみたり、夢無限大。