CSS clip-path

clip-pathとは、基本シェイプを指定するか、<clippath> 要素を参照してクリッピングパスを作成するCSSプロパティである。

clip-path CSSプロパティには、次に示す値を指定できる。

none

要素を切り取らない。

<img src="avator.jpg" style="clip-path: none;">

inset()

要素を矩形に切り抜いて表示する。inset関数の引数は次のように指定する。

inset(上下左右)

inset(上下 左右)

inset(上 左右 下)

inset(上 右 下 左)

inset(上下左右 round 上下左右)

inset(上下左右 round 左上と右下 右上と左下)

<img src="avator.jpg" style="clip-path: inset(10%);">

<img src="avator.jpg" style="clip-path: inset(10% 20%);">

<img src="avator.jpg" style="clip-path: inset(10% 20% 30%);">

<img src="avator.jpg" style="clip-path: inset(10% 20% 30% 40%);">

要素を角丸に切り抜くには、inset関数の引数にroundを指定する。

<img src="avator.jpg" style="clip-path: inset(0 round 10px);">

<img src="avator.jpg" style="clip-path: inset(0 round 10px 20px);">

circle()

要素を円形に切り抜いて表示する。circle関数の引数は次のように指定する。

circle(円の半径)

circle(円の半径 at 円の中心地点X軸 円の中心地点Y軸)

<img src="avator.jpg" style="clip-path: circle(50%);">

<img src="avator.jpg" style="clip-path: circle(25% at 50% 75%);">

ellipse()

要素を楕円形に切り抜いて表示する。ellipse関数の引数は次のように指定する。

ellipse(楕円の半径X軸 楕円の半径Y軸)

ellipse(楕円の半径X軸 楕円の半径Y軸 at 円の中心地点X軸 円の中心地点Y軸)

<img src="avator.jpg" style="clip-path: ellipse(35% 50%);">

<img src="avator.jpg" style="clip-path: ellipse(30% 20% at 50% 75%);">

polygon

要素を多角形に切り抜いて表示する。polygon関数の引数は次のように指定する。

polygon(頂点の位置X軸 頂点の位置Y軸 頂点の位置X軸 頂点の位置Y軸 ...)

要素を三角形に切り抜くには、三角形の頂点を次のように指定する。

<img src="avator.jpg" style="clip-path: polygon(0% 0%, 100% 0%, 50% 100%);">

<img src="avator.jpg" style="clip-path: polygon(50% 0%, 100% 100%, 0% 100%);">

対応ブラウザ

CSSプロパティのclipを使うと、表示する範囲を指定することができます。この記事では、clipの使い方をサンプルを交えてご紹介します

clip: clip

clip

表示する範囲を以下の値の中から指定します。

CSSには次のプロパティがある。

World Wide Web Consortium (2021) CSS Masking Module Level 1