📐

新時代のCSS三角の作り方 clip-path 〜さらば、すべての border 〜

2021/04/02に公開

CSSで三角を作る方法と言えば border でした。
私も三角を作りたい時は「css 三角」で検索、コピペして調整して作っていました。

ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。

ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。
https://caniuse.com/?search=clip-path

clip-path を使った三角の作り方

こう CSS を書くと

.sankaku {
  background-color: blue;
  width: 16px;
  height: 20px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

こうなります。

どこの点を結ぶかは clip-path で指定して、高さと幅は height, width で調整する。分かりやすいですね。

より詳細は MDN 見ていただくのがいいかと思いますが、とりあえず polygon について解説します。

polygon 内ではカンマ区切りで頂点の座標を x座標, y座標 で指定していきます。
先ほど三角を描いたこちらですが、

clip-path: polygon(0 0, 0% 100%, 100% 50%);

最初の 0 0 が左上の点、 0% 100% が左下の点、 100% 50% が右の頂点となっています。

応用して下向きの三角を作ろうと思ったら、
まず左上が必要なので 0 0、右上に必要なので 100% 0、そして下の辺の真ん中に必要なので 50%, 100% と書いたら

.sankaku {
	...
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

こうなりました！

明らかに border のハックより分かりやすいので今後はこっちを使っていこうと思います。今までありがとう border。