Что такое свойство `clip-path`?

Question

Accepted Answer

## Обрезка по контуру

`clip-path` обрезает отрисовку элемента по фигуре: `circle()`, `ellipse()`, `inset()`, `polygon()`, `path()`, либо по `url(#svgClip)`.

```css
.avatar {
  clip-path: circle(50%);
}
.ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
```

Обрезанные области не получают pointer-events (hit-testing следует клипу в современных браузерах — уточняйте кейс). Анимируется аккуратнее, чем старый `clip`. Для сложных форм часто SVG clipPath. Отличие от `mask`: clip обычно бинарный контур, mask — с альфой.