[CSS] borderを使わずclip-pathで「三角▲」を作る

2021/09/01

2 min read

背景

これまで CSS だけを利用して三角形を作る際は border を利用することが多かった。

/* 縦横 100px の三角形を作成する */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid var(--color);
}

border を利用した実装だと何を表現しているのか一見してもわかりづらい。

実装方法

borderではなく、clip-pathプロパティにpolygon()関数を利用する。

サンプル

/* 縦横 100px の三角形を作成する */
.triangle {
  height: 100px;
  width: 100px;
  background: var(--color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

種別

上向き

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

下向き

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

右向き

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

左向き

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

参考

Edit on GitHub