Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

clip-path: inset() — кадрирование hero без overflow

Маска прямоугольником и скруглением.

Изображение статьи: clip-path: inset() — кадрирование hero без overflow

clip-path: inset(0 round 24px) обрезает видео-hero по скруглённому прямоугольнику без обёртки overflow: hidden, которая иногда ломает position: sticky потомков.

Для сложных силуэтов — polygon() или SVG clipPath в url().

- [clip-path — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) — Функции inset, polygon.

- [Clipping — CSS Masking](https://www.w3.org/TR/css-masking-1/#clipping) — Модуль CSS Masking.

---

## Производительность

Анимация clip-path дороже transform — для hover ограничьтесь статичной маской.

#CSS#hero#визуал

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.