こんにちは、素人エンジニアです。
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度回転＆skewYでy軸方向に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プロパティは、擬似要素にも反映されます。
擬似要素は、ひし形の上の２辺に合うように位置をずらしています。
位置の調節には、translateXとtranslateYを使用しました。
作り方③ 擬似要素を変形させよう
このままでは、菱形が並んでいるだけです。
擬似要素を変形させて、三角形を作っていきます。
.triangle::before {
transform: skewX(-45deg) translateX(50%);
}
.triangle::after {
transform: skewY(-45deg) translateY(50%);
}擬似要素にそれぞれ、skewX(-45deg)とskewY(-45deg)を追加しましょう。
追加する順番に注意してください。
図形の底辺が平らになりましたね！
作り方④ 角を丸くしよう！
あとは角を丸くするだけです。
border-radiusは、四角形の４つの角をひとつずつ指定する事ができます。
必要な箇所に設定して角を丸くしましょう！
完成！！
三角形にカーソルを合わせると、図形の重なりがわかります。
コピペで使えるように、サンプルコードを載せておきますね。
.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%);
}以上！
コメント