角の丸い三角形をCSSのみで作る方法

triangle with rounded corners CSS
スポンサーリンク

こんにちは、素人エンジニアです。

Webサイトで「三角形」を作るには、borderプロパティを使う方法があります。
この方法はとても簡単なのですが、どうしても角ばった図形になってしまいます。

では、角の丸い三角形はどうやったら作成できるのでしょうか?
今回は、cssだけで角の丸い三角形の作り方を紹介します。

角の丸い三角形のサンプル

See the Pen triangle with rounded corners by amateur-engineer (@amaeng) on CodePen.

三角形にマウスのカーソルを持っていくと、ネタバレするようになっています。

この図形のポイントはひし形です。
では、作り方を解説していきます。

作り方① ひし形を作ろう

まずは、要のひし形を作って行きましょう
ひし形は、四角形を傾斜変化させることで作れます。

.triangle {
  position: relative;
  width: 20vmin;
  height: 20vmin;
  background: #ffbf7f;
  transform: rotate(30deg) skewY(30deg) scaleX(.86666);
}

正方形を、rotateで30度回転skewYy軸方向に30度傾斜変化させています。
傾斜変化させた分だけ辺の長さが変わるので、sclaleX水平方向を縮小して微調整。
これでひし形の完成です!

作り方② 擬似要素を使おう

cssのみで三角形の角を丸くするには、borderではなく擬似要素を使用します。
擬似要素を使えば、HTMLに書かれていない要素を擬似的に作る事ができます。
今回使用する擬似要素は::before::afterです。

.triangle::before,
.triangle::after{
  content: "";
  position: absolute; 
  width: 30vmin;
  height: 30vmin;
}

.triangle::before {
  border: 1px solid #0f0;
  transform: translateX(50%);
}

.triangle::after {
  border: 1px solid #00f;
  transform: translateY(50%);
}

分かりやすいようにborderで色分けしました。
traiangleで設定したtransformプロパティは、擬似要素にも反映されます。
擬似要素は、ひし形の上の2辺に合うように位置をずらしています。
位置の調節には、translateXtranslateYを使用しました。

作り方③ 擬似要素を変形させよう

このままでは、菱形が並んでいるだけです。
擬似要素を変形させて、三角形を作っていきます。

.triangle::before {
  transform: skewX(-45deg) translateX(50%);
}

.triangle::after {
  transform: skewY(-45deg) translateY(50%);
}

擬似要素にそれぞれ、skewX(-45deg)skewY(-45deg)を追加しましょう。
追加する順番に注意してください。
図形の底辺が平らになりましたね!

作り方④ 角を丸くしよう!

あとは角を丸くするだけです。
border-radiusは、四角形の4つの角をひとつずつ指定する事ができます。

4つ角それぞれの指定方法
  • 左上 border-top-left-radius: 30%;
  • 右上 border-top-right-radius: 30%;
  • 左下 border-bottom-left-radius: 30%;
  • 右下 border-bottom-right-radius: 30%;


必要な箇所に設定して角を丸くしましょう!

完成!!

三角形にカーソルを合わせると、図形の重なりがわかります。
コピペで使えるように、サンプルコードを載せておきますね。

.triangle,
.triangle::before,
.triangle::after{
  width: 30vmin;
  height: 30vmin;
  background: #ffbf7f;
}

.triangle::before,
.triangle::after {
  content: "";
  position: absolute;
}

.triangle {
  position: relative;
  border-top-left-radius: 30%;
  transform: rotate(30deg) skewY(30deg) scaleX(.86666);
}

.triangle::before {
  border-top-right-radius: 30%;
  transform: skewX(-45deg) translateX(50%);
}

.triangle::after {
  border-bottom-left-radius: 30%;
  transform: skewY(-45deg) translateY(50%);
}

以上!

コメント

タイトルとURLをコピーしました