borderで三角形を作るのはもう古い？イマドキなCSS三角形の作り方！

こんにちは、こばです。

CSSで三角形を作る方法と言われて真っ先に思いつくのが「borderプロパティ」を使ったものですよね。

See the Pen
Untitled by koba-ottoworks (@koba-ottoworks)
on CodePen.

こちらは調べれば「なぜこの書き方なのか？」は説明し尽くされていますので割愛しますが、とりあえずボーダーの特性を利用して、三角形を作り出す方法でした。
いちいち計算するのも面倒なので、基本ジェネレーターツール（https://www.create-nayu.dev/tools/css-triangle-generator）などをつかってコピペで作っていましたが、最近進化の目まぐるしいCSS。
三角形もめちゃめちゃシンプルに記述出来るようになっていました。

それがこちら。

See the Pen
triangle_new by koba-ottoworks (@koba-ottoworks)
on CodePen.

「clip-path」と「aspect-ratio」、「三角関数（sin(), cos(), tan()）」を使った方法です。三角関数なんて高校生以来・・・
cssで三角関数が使えるようになったよ！というのは知っていたのですが、「えっ・・・・どこで・・使う・んだ・・・？」という感じだったんですけど、意外と早く出会いました。

数学がめっぽう苦手な私はまだ深く踏み込めていませんが・・・どなたかチャレンジしてみてください。

ちなみにこの三角形はこちらのジェネレーターで作りました。

結局ツールかよ！ってツッコミが聞こえて来そうですが、効率優先で！画像のくり抜きなども出来るので大変便利です！
ぜひ活用してみてください。