【CSS】borderを使わないで三角形を作る方法「clip-path」

borderを使って三角形を作る方法

CSSで三角形を作る方法といえば、これまではborderを使う方法が一般的でした。

<span class="triangle"></span>

.triangle {
  display: block;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 150px solid blue;
  border-left: 100px solid transparent;
}

表示結果：

ご紹介したコードは上向きの三角形のサンプルコードですが、top, right, bottom, left それぞれのborderやtransformなどを調整することで多様な三角形を作ることができます。

borderを使った方法は、直感的ではないため仕組みを理解することが難しく、CSSで三角形を使うたびに検索してジェネレーターなどを使っている人も多いかもしれません。

borderを使わず、clip-pathで三角形を作る

borderを使わずにCSSで三角形を作る方法として、clip-pathを使う方法があります。

clip-pathでは、要素の表示する範囲をクリッピング領域を作成して設定します。

<span class="triangle"></span>

.triangle {
  display: block;
  width: 200px;
  height: 150px;
  background-color: blue;
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}

表示結果：

イメージとしては、用意した四角形のブロック要素から三角形を切り抜いて、その切り抜いた部分だけ表示した感じでしょうか。

clip-pathに設定したpolygonの中の値は以下のようになります。

polygon({頂点1のx座標} {頂点1のy座標}, {頂点2のx座標} {頂点2のy座標}, {頂点3のx座標} {頂点3のy座標})

頂点1〜3の順番については、どの頂点から記述しても表示される三角形に違いはありません。

clip-pathを使って三角形を作る方法を身につけるために、もう一つサンプルを見てみましょう。

<span class="triangle"></span>

.triangle {
  display: block;
  width: 150px;
  height: 150px;
  background-color: blue;
  clip-path: polygon(0 0, 70% 100%, 100% 70%);
}

表示結果：

このように、clip-pathに設定する値を調節するだけで、borderを使った方法と同様に多彩な三角形を作ることができます。（大きさはwidth, height で調整します。）

borderを使った方法よりも直感的なので、clip-pathを使う方法に慣れてしまえば簡単にCSSで三角形を作ることができるようになります。