★CSSリファレンス

clip-path …… 要素をクリッピング（切り抜き）する

clip-pathプロパティは、要素をクリッピング（切り抜き）する際に使用します。
clip-pathプロパティで要素をクリッピングすると、指定したクリッピング領域の外側が非表示となって内側だけが表示されます。

クリッピング領域の形状には、長方形、円、楕円、多角形を指定することができます。
以下の形状関数で指定します。

• inset() … 内側へのオフセット（通常は長方形となる）
• circle() … 円
• ellipse() … 楕円
• polygon() … 多角形

クリッピング領域を生成する際の対象ボックスは、以下のキーワードで指定します。

• margin-box … マージンボックス
• border-box … ボーダーボックス
• padding-box … パディングボックス
• content-box … コンテントボックス
• fill-box … オブジェクトバウンディングボックス。CSSでは、border-box となる
• stroke-box … ストロークバウンディングボックス。CSSでは、border-box となる
• view-box … 最も近いSVGビューポートボックス。CSSでは、border-box となる

尚、clipプロパティは廃止されました。
代わりに clip-pathプロパティを使用することが推奨されています。

■値

■初期値・適用対象・値の継承

■使用例

h5.m {
	margin-bottom: 0;
}

<h5 class="m">clip-pathプロパティの指定なし</h5>
<div>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif">
</div>

<h5 class="m">clip-path: inset(20px 30px);</h5>
<div>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: inset(20px 30px);"></div>

<h5 class="m">clip-path: circle(60px at 100px 75px);</h5>
<div>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: circle(60px at 100px 75px);">
</div>

<h5 class="m">clip-path: ellipse(100px 50px at 100px 75px);</h5>
<div>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: ellipse(100px 50px at 100px 75px);">
</div>

<h5 class="m">clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);</h5>
<div>
<img src="https://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);">
</div>

ブラウザ上の表示

clip-pathプロパティの指定なし

clip-path: inset(20px 30px);

clip-path: circle(60px at 100px 75px);

clip-path: ellipse(100px 50px at 100px 75px);

clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);