# CSS `clip-path`

The `clip-path` property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

## 1. Basic Shapes

You can use shape functions to define the clipping region.

### `circle()`
Defines a circle.
*   Syntax: `circle(radius at position)`

```css
.clip-circle {
  clip-path: circle(50%); /* Circle with radius 50% of element */
  clip-path: circle(100px at center);
}
```

### `ellipse()`
Defines an ellipse.
*   Syntax: `ellipse(radius-x radius-y at position)`

```css
.clip-ellipse {
  clip-path: ellipse(50% 20% at 50% 50%);
}
```

### `inset()`
Defines an inset rectangle.
*   Syntax: `inset(top right bottom left round border-radius)`

```css
.clip-inset {
  /* 10px from top/bottom, 20px from left/right */
  clip-path: inset(10px 20px);
  
  /* With rounded corners */
  clip-path: inset(10px round 5px);
}
```

### `polygon()`
Defines a polygon using x/y coordinates. This is the most flexible shape.

```css
.clip-triangle {
  /* Top-center, Bottom-right, Bottom-left */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
```

## 2. Geometry Box

You can define the reference box for the clipping path.

*   `margin-box`
*   `border-box`
*   `padding-box`
*   `content-box`

```css
div {
  clip-path: circle(50%) margin-box;
}
```

## 3. Animation

The `clip-path` property is animatable if the shapes have the same number of points (for polygons).

```css
div {
  transition: clip-path 0.5s;
  clip-path: circle(20%);
}

div:hover {
  clip-path: circle(50%);
}
```

[[programming/css/css]]
[[programming/css/css-shapes]]