要素の表示領域を多角形や円形などで切り抜くプロパティです。circle()、polygon()、ellipse()などの関数で形状を指定し、マスク効果やユニークな形状のデザインを実現できます。
clip-path: <shape> | <url>任意値: [clip-path:polygon(50%_0,100%_100%,0_100%)]
専用ユーティリティは無く任意値で書く。マスクは mask-* ユーティリティ（v4新設）がある。
<!-- HTML -->
<div class="circle-clip">CIRCLE</div>
/* CSS */
.circle-clip {
width: 120px;
height: 120px;
background: #3b82f6;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
clip-path: circle(50% at 50% 50%);
}中央に円形で切り抜く（HTML+CSS例）
<!-- HTML -->
<div class="triangle-clip">TRIANGLE</div>
/* CSS */
.triangle-clip {
width: 120px;
height: 120px;
background: #f59e42;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}三角形に切り抜く（HTML+CSS例）
SVGやCSS Shapesと組み合わせると表現力が広がる。
clip-pathで切り抜いた外側はクリックも当たらなくなる（ヒットテスト領域も切れる）点をAIは説明し忘れがちです。またpolygon同士のアニメーションは頂点数が同じでないと補間されません。切り抜きでなく「ぼかしマスク」が欲しい場合はmask-imageが適任、という使い分けも有効です。
セクションの下端を斜めに切るデザインをclip-pathで実装して、hoverで形が滑らかに変わるよう頂点数を揃えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。