SAMPLE

clip-pathで作る三角形

Written by koizumi

INDEX

説明

CSSのclip-pathプロパティを使った三角形の作り方を紹介します。

手順

clip-pathプロパティのpolygonで3点の座標を指定し、クリッピング領域を作成します。

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

上記のスタイルの場合は上向きの三角形が作成されます。

座標の位置を調整することでさまざまな向きの三角形を作成することができます。

正三角形

正三角形を作る場合、高さは「一辺の長さ × sin60°」となります。
heightに上記の計算式を指定することで作成できます。

.triangle {
  width: 50px; //一辺の長さ
  height: calc(50px * sin(60deg)); //一辺の長さ × sin60°
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

横向きの場合はwidthに指定することで同様に作成できます。

応用

再生ボタン

videoタグ内に右向きの三角形を配置することで再生ボタンを作成することができます。

※上記サンプルはクリックしても動画は再生されません

吹き出しの三角形

ボックスの上下左右に、同じ色の三角形をつけることで吹き出しを作成することができます。

また、枠線でできた吹き出しは、枠線色の三角形と背景色の三角形を重ねることで表現することができます。

PICK UP