clip-path
Обрезает элемент по фигуре: видимой остаётся только часть внутри неё.
Синтаксис
clip-path: shape();Значения
| Параметр | Тип | Описание |
|---|---|---|
| circle() | function | Круг: `circle(50%)`. |
| polygon() | function | Многоугольник по точкам: `polygon(50% 0, 100% 100%, 0 100%)`. |
| inset() | function | Прямоугольник с отступами от краёв, можно со скруглением. |
Примеры
Круг, треугольник и скруглённый прямоугольник:
<style>
img { width: 100px; height: 100px; object-fit: cover; margin: 4px; }
</style>
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: circle(50%);">
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: polygon(50% 0, 100% 100%, 0 100%);">
<img src="/media/photo-200x200.jpg" alt="" style="clip-path: inset(10px round 12px);">Примечания
Обрезанная часть не только невидима, но и не реагирует на щелчки. Фигуры одного типа с одинаковым числом точек можно анимировать через transition.
См. также
- border-radius — Скругляет углы элемента.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
- mask-image — Использует картинку или градиент как маску: где маска непрозрачна, элемент виден, где прозрачна — исчезает.
Вопросы и ответы по теме
В учебнике
- Фильтры — Свойство filter — размытие, чёрно-белый режим, яркость, контраст и тень по контуру drop-shadow, а также backdrop-filter для эффекта матового стекла.