# clip-path

> 要素の表示領域を多角形や円形などで切り抜くプロパティです。circle()、polygon()、ellipse()などの関数で形状を指定し、マスク効果やユニークな形状のデザインを実現できます。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/clip-path/

## 構文

```css
clip-path: <shape> | <url>
```

## Tailwindでは

- 任意値: `[clip-path:polygon(50%_0,100%_100%,0_100%)]`
- 補足: 専用ユーティリティは無く任意値で書く。マスクは mask-* ユーティリティ（v4新設）がある。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 55+ / Firefox 3.5+ / Safari 9.1+ / Edge 79+

## コード例

### 例1: 中央に円形で切り抜く（HTML+CSS例）

```css
<!-- 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%);
}
```

### 例2: 三角形に切り抜く（HTML+CSS例）

```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%);
}
```

## TIPS

SVGやCSS Shapesと組み合わせると表現力が広がる。

## AIがよく間違えるポイント

clip-pathで切り抜いた外側はクリックも当たらなくなる（ヒットテスト領域も切れる）点をAIは説明し忘れがちです。またpolygon同士のアニメーションは頂点数が同じでないと補間されません。切り抜きでなく「ぼかしマスク」が欲しい場合はmask-imageが適任、という使い分けも有効です。

## AIへの依頼文例

- セクションの下端を斜めに切るデザインをclip-pathで実装して、hoverで形が滑らかに変わるよう頂点数を揃えて