CSSで作る三角形はborderよりclip-path

こんにちは。Gaji-Labo 横田です。今日は CSS の clip-path プロパティで三角形を作る方法が直感的で素敵！ということを書きたいと思います。

これまで CSS で作る三角形といえば border プロパティだった

CSS で三角形を作る時、長らく border プロパティを使っていました。こんな感じですね。

.triangle {
  width:0;
  height:0;
  border-style:solid;
  border-width: 80px 50px 0 50px;
  border-color: transparent transparent #000000 transparent;
 }

border-width で三角形の底辺と高さを決め、三角形の向きによって border-color の transparent で不要な部分を透明にするという方法です。
このコード例では下向きの三角形「▼」が作られます。
しかし border プロパティで作る方法はコードが直感的に分かりにくく感じていました。正三角形の作成やグラデーションの三角形を意図通りに作るためにジェネレーターに頼ることもしばしばでしたし、あれこれ調整が必要でした。

これからの時代は clip-path プロパティ

clip-path プロパティは、要素の表示部分を設定するプロパティです。 clip-path で指定した領域の内側が表示され、外側は非表示になります。値には円を定義できる circle() や 楕円を定義できるellipse() などありますが、三角形を作るには、多角形を定義する polygon() を使います。

.triangle {
  width: 100px;
  height: 80px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  background-color: #000000;
 }

polygon() の中でカンマ区切りで x と y の座標を指定します。三角形なので3点指定が必要です。このコード例では先ほどと同じく下向きの三角形「▼」が作られます。
例えば上向き三角形「▲」であれば、

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

となります。
三角形の大きさを width と height で指定します。
三角形の色は background-color で塗ります。
もし上向き三角形の色を右方向にグラデーションしたい場合は

.triangle {
  width: 100px;
  height: 80px;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%);
  background: linear-gradient(
      to right,
      black 0%,
      white 100%
  );
}

直感的に意図した通りの三角形を作れます。うん、シンプル。

clip-path プロパティは IE 以外の主要ブラウザに対応

clip-path プロパティは IE 以外の主要ブラウザが対応済みです。
https://caniuse.com/?search=clip-path

おわりに

clip-path プロパティで楽しいCSS ライフを！