CSS

　clip-pathプロパティには、いくつかの値があります。ここでは、よく使われる値について紹介します。

基本的な値

none

clip-path: none; は、クリッピングを行わないことを示します。これが既定値です。

initial / unset

initial は、プロパティの初期値に設定することを示します。unset は、親の値に従って初期値が設定されることを示します。

シェイプの値

circle()

　circle() 関数は、円形のクリッピングを作成します。引数として、円の中心座標と半径を指定します。半径は、px、em、rem、% などの単位を指定できます。

CSS

.element {
	clip-path: circle(50% at center);
}

　上記の例では、要素の中心に半径 50%の円形のクリッピングが作成されます。

ellipse()

　ellipse() 関数は、楕円形のクリッピングを作成します。引数として、楕円の中心座標と水平半径、垂直半径を指定します。半径は、px、em、rem、% などの単位を指定できます。

CSS

.element {
	clip-path: ellipse(25% 50% at center);
}					  

　上記の例では、要素の中心に垂直半径が 50%、水平半径が 25%の楕円形のクリッピングが作成されます。

polygon()

　polygon() 関数は、多角形のクリッピングを作成します。引数として、各頂点の座標を指定します。

CSS

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

　上記の例では、五角形のクリッピングが作成されます。

SVGの値

　clip-pathプロパティでは、SVGパスを使用して複雑なクリッピングを作成することもできます。SVGパスは、 path要素の d属性で指定される値です。

.element {
	clip-path: url(#my-clip-path);
}

　上記の例では、IDが my-clip-pathの SVG clipPath要素を参照する url() 関数が使用されています。

継承

　clip-pathプロパティは、継承されません。つまり、clip-pathプロパティが設定されている要素の子要素には、クリッピングされた領域は適用されません。ただし、子要素に個別に clip-pathを設定することはできます。

クリッピングのアニメーション

　clip-pathプロパティを使用することで、クリッピングにアニメーションを追加することもできます。以下の例は、hover状態で円形のクリッピングを拡大するアニメーションを作成する例です。

.element {
	margin: 1ex;
	width: 100px;
	height: 100px;
	background-color: khaki;
	clip-path: circle(25% at center);
	transition: clip-path 1s ease-in-out;
}

.element:hover {
	clip-path: circle(50% at center);
}

　この例では、要素を 100px x 100px の正方形として定義しています。clip-pathプロパティで、最初は円形の半径が 0%のクリッピングを作成しています。transitionプロパティで、clip-pathプロパティに 1秒間のアニメーションを追加しています。hover状態では、clip-pathプロパティを変更して、半径 50%の円形のクリッピングを作成しています。マウスを要素の上に移動すると、クリッピングが円形に拡大するアニメーションが発生します。

ベンダープレフィックス

　clip-pathプロパティは、最新の CSS仕様の一部であり、すべてのブラウザで完全にサポートされているわけではありません。一部のブラウザでは、ベンダープレフィックスを使用する必要があります。

　以下の例は、ベンダープレフィックスを使用して、clip-pathプロパティをサポートするブラウザに対応する方法を示しています。

.element {
	clip-path: circle(50% at center);
	-webkit-clip-path: circle(50% at center);
}

　この例では、-webkit-clip-pathプロパティを使用して、一部のブラウザに対応しています。clip-pathプロパティを使用して、他のブラウザでサポートされている最新の CSS仕様に準拠しています。