clip-path CSSプロパティ

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 左上と右下 右上と左下)
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);">
<img src="avator.jpg" style="clip-path: inset(0 round 10px 20px 30px);">
<img src="avator.jpg" style="clip-path: inset(0 round 10px 20px 30px 40px);">
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%);">
 

clip

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

書式

clip: clip

属性値

clip
表示する範囲を以下の値の中から指定します。
意味
auto自動(規定値)
rect(top,right,bottom,left)指定範囲を表示する
inherit継承

CSSプロパティ

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

W3C (2021) CSS Masking Module Level 1