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

CSSで角丸の三角形を作成する方法をサンプルコード付きで紹介します。::before/::afterの疑似要素を上手く使い三角形の角丸にチャレンジしてみましょう!

コンテンツ [表示]

  1. 1CSSで角丸の三角形を作成したい
  2. 2CSSで角丸の三角形を作成する方法
  3. 2.1ひし形を作成
  4. 2.2ひし形を3つ重ねる
  5. 2.3角丸をつける
  6. 2.4overflow: hiddenで仕上げ
  7. 2.5背景色を整える
  8. 3まとめ

CSSで角丸の三角形を作成したい

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

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

三角形の角丸

角が丸い三角形をCSSで作っていきます。

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

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

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

ひし形を作成

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

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

ひし形を3つ重ねる

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

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

角丸をつける

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

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

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

overflow: hiddenで仕上げ

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

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

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

背景色を整える

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

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

まとめ

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

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

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

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次