HTML / CSS
【CSS】「clip-path」画像をクリッピング
Clip-path
要素の一部を切り抜いて表示するためのCSSプロパティです。
指定された形に基づいて、要素が表示される領域を定義します。
形状は、基本的な図形（円形、四角形、ポリゴンなど）であったり、頂点を自由に増やしたりできます。
・対応ブラウザ
全ての主要ブラウザで対応が完了しているので、安心して使用できます。
inset()：四角形
四角形の形にクリッピングできる
四角形のシェイプを定義する際はinset()を指定します。
要素の上下左右の端を基準に、指定された値だけ内側の四角形がマスクされます。
clip-path: inset(10px 20px 30px 40px);
clip-path: inset(上 左 下 右);
角丸にしたい場合はここにさらに「round」を指定します
clip-path: inset(10px 20px 30px 40px round 10px);
circle()：円形
円形に対象要素をクリッピングできる
正円のシェイプを定義する際はcircle()を指定します。
円の半径と、要素の左上端を基準として円の中心座標を記述します。
clip-path: circle(100px at 50% 60%);
clip-path: circle(円のサイズ（半径） at 左端 上端);
左端から50%、上端から60%を中心座標とする半径100pxの正円がマスクされます。
ellipse()：楕円形
楕円形の形にクリッピングできる
楕円のシェイプを定義する際はellipse()を指定します。
正円の定義と基本的には同じですが、X方向とY方向の半径の指定が必要です。
clip-path: ellipse(60px 100px at 50% 60%);
clip-path: ellipse(x方向の半径 y方向の半径 at 左端 上端);
x方向の半径が60pxでy方向の半径が100px、中心座標が左端から50%、上端から60%の楕円形がマスキング
polygon()：多角形
頂点の座標を1つ以上定義し、それぞれの頂点を結んでできた形状でクリッピングできる
多角形のシェイプを定義する際はpolygon()を指定します。
四角形や円とは違い、多角形は頂点の座標を指定することで定義されます。
頂点の座標は、X座標、Y座標の順番で指定し、座標の区切りはカンマを用います。
clip-path: polygon(130px 0px, 0px 160px, 220px 220px);
clip-path: polygon(X座標 Y座標, X座標 Y座標, X座標 Y座標);
座標(130px 0px)、(0px 160px)、(220px 220px)の三点を頂点とした、三角形がマスクされます。
clip-path makerを使って簡単にパスを作成する方
切り抜く形、頂点の位置などを直感的に指定できるサイトです。CSSも出力してくれるのでそのまま使用できる
