ПаветтаГенератор clip-path
clip-path обрезает элемент по произвольной фигуре: скошенный угол у секции, шестиугольная аватарка, диагональный разделитель между блоками — всё это делается одним свойством, без картинок и масок.
Фигура
Готовый CSS
Разобрать чужое значение
Четыре функции и любая форма
Свойство clip-path обрезает элемент по произвольной фигуре: скошенный угол у секции, шестиугольная аватарка, диагональный разделитель между блоками. Всё это делается одним правилом, без картинок, масок и лишней разметки. Обрезанная часть исчезает целиком, включая фон, рамку и тень.
Фигуру задают одной из функций. Функция circle рисует круг с заданным радиусом и центром, ellipse — эллипс с двумя радиусами, inset — прямоугольник с отступами от краёв и собственным скруглением, polygon — многоугольник по списку точек в процентах от размеров элемента. Инструмент даёт двигать точки и сразу показывает результат.
Кликами и наведением обрезанная часть тоже не ловится: элемент перестаёт реагировать за пределами фигуры. Это удобно, когда фигурная кнопка не должна перехватывать нажатия своим невидимым прямоугольником.
| Функция | Что рисует | Пример |
|---|---|---|
| circle() | Круг | circle(50% at 50% 50%) |
| ellipse() | Эллипс | ellipse(40% 30%) |
| inset() | Прямоугольник с отступами | inset(10px round 8px) |
| polygon() | Многоугольник по точкам | polygon(50% 0, 100% 100%, 0 100%) |
От трафарета до алгоритмов отсечения
Обрезка по контуру старше компьютеров. В литографии и трафаретной печати краска проходила только через отверстие в маске, и форма отпечатка задавалась именно ею. В фотолаборатории тем же способом кадрировали снимок: лист закрывали маской и засвечивали только нужный участок.
В машинную графику отсечение пришло вместе с первыми векторными дисплеями: алгоритм Коэна — Сазерленда, описанный в шестидесятые, отсекал линии по границам окна, чтобы не рисовать то, что за экраном. Позже появился алгоритм Сазерленда — Ходжмана для отсечения многоугольников, и он до сих пор лежит в основе растеризации.
В вебе первым появилось свойство clip, работавшее только с прямоугольниками и только для абсолютно позиционированных элементов. Его признали устаревшим, и на смену пришёл clip-path из модуля CSS Masking: он умеет произвольные фигуры и работает с любым элементом. Соседнее свойство mask работает похоже, только форму там задаёт картинка или градиент вместо геометрической функции, — так делают мягкие растворяющиеся края.
Как задать фигуру и вернуть ей тень
Для скошенного угла секции возьмите многоугольник из четырёх точек и сдвиньте одну по горизонтали: получится диагональ. Для аватарки хватит круга с радиусом 50 процентов. Точки в polygon пишутся по часовой стрелке, координаты — от левого верхнего угла элемента.
Тени и рамки обрезаются вместе с элементом, поэтому box-shadow на фигурной карточке не будет виден. Обходят это внешней обёрткой с фильтром drop-shadow: он строит тень по реальному контуру. И проверьте результат на узком экране — проценты пересчитываются от размера, и на телефоне диагональ может стать почти вертикальной. Скруглить обычную карточку проще через генератор border-radius. Фигуру можно анимировать, если у обоих состояний одинаковое число точек: браузер интерполирует координаты, и многоугольник плавно перетекает в другой. При разном числе точек переход происходит скачком. Значение задают и через ключевые слова border-box, padding-box, content-box: тогда фигура обрезается по соответствующей рамке элемента без перечисления координат.
Держите в голове доступность. Обрезанный текст никуда не девается для программ чтения с экрана: они прочитают всё, включая невидимую часть. Если фрагмент не нужен читателю, убирайте его из разметки; фигура его только прячет.
| Функций фигур | четыре |
| Координаты | от левого верхнего угла |
| Точки многоугольника | по часовой стрелке |
| Обрезается | фон, рамка, тень |
| Нажатия за фигурой | не ловятся |
| Предшественник | свойство clip |
| Алгоритм отсечения | Сазерленда — Ходжмана |
| Тень для фигуры | filter: drop-shadow |
Как пользоваться
Точки многоугольника здесь перетаскиваются мышью прямо по предпросмотру, а координаты пересчитываются в проценты, поэтому фигура остаётся правильной при любом размере блока. Кроме многоугольника доступны круг, эллипс и прямоугольник со скруглением. Готовое свойство копируется одной кнопкой.
- Многоугольник для скосов и звёзд, круг и эллипс для аватарок, inset для рамок со скруглением.
- У многоугольника точки двигаются мышью прямо по предпросмотру. Двойной клик добавляет новую.
- Скос, стрелка, шестиугольник, ромб, звезда — дальше их можно доработать.
- Готовое свойство под предпросмотром, координаты в процентах.
Частые вопросы
Проценты или пиксели
Проценты считаются от размеров самого элемента, поэтому фигура тянется вместе с ним и остаётся правильной на любом экране. Пиксели дают фиксированную форму, которая на узком блоке обрежет лишнее. Для адаптивной вёрстки почти всегда нужны проценты.
Чем clip-path отличается от overflow: hidden
overflow обрезает только по прямоугольнику блока с учётом скругления. clip-path режет по любой фигуре, включая вогнутые, и обрезает сам элемент целиком. При этом обрезанная область перестаёт ловить клики: событие мыши в отрезанном углу не дойдёт до элемента.
Можно ли анимировать clip-path
Да, но только между фигурами одного типа и с одинаковым числом точек. Многоугольник из четырёх точек не превратится плавно в многоугольник из шести — браузер не знает, куда деть лишние. Приём: держать одинаковое число точек и просто двигать их, дублируя вершины там, где угол не меняется.
Почему тень пропала после обрезки
box-shadow рисуется вокруг прямоугольника блока, а clip-path отрезает всё за пределами фигуры, включая тень. Решение — обернуть элемент в родителя и повесить тень на него через filter: drop-shadow: этот фильтр обводит уже обрезанный контур.
Как сделать диагональный разделитель секций
Многоугольником из четырёх точек, где верхние или нижние вершины смещены по вертикали. Например polygon(0 0, 100% 0, 100% 92%, 0 100%) даёт скос нижнего края. Такой приём легче картинки и перестраивается под любую ширину.
Работает ли clip-path в старых браузерах
Базовые фигуры поддерживаются всеми актуальными браузерами больше пяти лет. В браузере, который свойство не понял, элемент просто останется прямоугольным — вёрстка не разваливается, теряется только форма. Поэтому критичные элементы вроде кнопок обрезать не стоит.
Спросите нейросети об инструменте
Похожие инструменты
Скругление каждого угла отдельно, эллиптические радиусы через слэш, проценты и пиксели. Собирает самую короткую запись из возможных.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьКонвертер CSS-единицpx в rem, em, pt, проценты, vw и vh при своём базовом размере шрифта и вьюпорте; таблица типовых размеров и генератор clamp() для плавного шрифта.
ОткрытьГенератор CSS-анимацииБольше двадцати эффектов появления, внимания и движения. Выдаёт и правило keyframes, и свойство animation целиком.
ОткрытьГенератор CSS filterРазмытие, яркость, контраст, насыщенность, оттенок, сепия и тень по контуру. Предпросмотр на своей картинке, файл остаётся в браузере.
ОткрытьГенератор CSS transformСдвиг, поворот, масштаб и наклон, включая трёхмерные повороты с перспективой. С точкой отсчёта и разбором чужого значения.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.