CSSで角丸の三角形を作成する方法を解説！

みなさんはCSSで角丸を作れますでしょうか？あるいは三角形を作れますでしょうか？

今回の記事ではCSSのtransformプロパティと角丸を実現するborder-radiusのプロパティを組み合わせて、角丸と三角形のあわせ技「角丸の三角形」を作る方法を解説していきます。

まず角丸の三角形ですが、少し難しい方法となります。１つの要素でやる場合でも::before・::afterの疑似要素を上手く使って実装していきます。

順番に見ていきましょう。

まずはひし形を作成していきます。

最終的に.triangleという要素を角丸の三角形にしていきますが、まずはひし形にします。transformのプロパティで角度、傾き、大きさを調整しひし形にします。

次に::beforeと::afterの疑似要素も同様にひし形にして、重なるように配置していきます。

ここまで実装すると上記のようにひし形が３つ重なり大きな三角形となっています。

３つのひし形それぞれに適度に角丸をつけましょう。

段々と、三角形が見えてきましたでしょうか？

それでは最後に仕上げです。

それでは最後に.triangleのセレクタにoverflow: hiddenをつけるのと、背景色をtransparentに変更しましょう。

すると、疑似要素の::before（青）と::after（赤）が重なった領域が角丸三角形となっているのがわかるかと思います。

最後に背景色を::before・::afterの疑似要素に同じものを設定しましょう。

以上で、角丸三角形の完成です！

いかがでしたでしょうか。ステップに分けて角丸三角形の作り方を解説してきました。

ここまでやるなら、画像で作ったほうが早いという方は画像でももちろんいいですが、一度CSSにすることで、そのclassやスタイルをすぐに使いまわしができるため便利です。

ぜひ一度チャレンジしてみて下さい！