🔸
CSSで三角形など好きな形を作ってみる
最近インターン先でCSS（正確にはSCSS）を使う機会がありました。そんな中、四角形を切り取ってできる形を作る際に少し手こずったのでメモします。
polygon()関数
polygon()という関数を使うことで自由度高く図形を作り出すことができます。使い方は意外に簡単で、頂点になる部分の座標をx, yで指定していくスタイルです。
今回はひとまず縦横300pxの正方形であるboxクラスを用意しました。
.box
.box {
background-color: aqua;
width: 200px;
height: 200px;
}
三角形を作ってみる
三角形は以下のようにclip-pathプロパティにpolygon()関数で以下のように指定することで描画することができます。
.box
.box {
background-color: aqua;
width: 200px;
height: 200px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
三角形は3つの頂点から成るため、一番上の頂点から時計回りに3つの座標を指定しています。polygon()関数では四角形の左上を(0,0)とすることに注意してください。
三角形は一番上の頂点が正方形の上の辺の中点、他2つの点がそれぞれ正方形の右下・左下の点なので上のように指定すると三角形ができます。
矢印も作ってみる
こちらはMDNからの引用ですが、指定する頂点の数を増やすことで矢印のような少し複雑な形も作ることができます。
.box
.box {
background-color: aqua;
width: 200px;
height: 200px;
clip-path: polygon(0% 20%,
60% 20%,
60% 0%,
100% 50%,
60% 100%,
60% 80%,
0% 80%);
}
参考文献
Discussion