Генератор clip-path
clip-path обрезает элемент по произвольной фигуре: скошенный угол у секции, шестиугольная аватарка, диагональный разделитель между блоками — всё это делается одним свойством, без картинок и масок. Точки многоугольника здесь перетаскиваются мышью прямо по предпросмотру, а координаты пересчитываются в проценты, поэтому фигура остаётся правильной при любом размере блока. Кроме многоугольника доступны круг, эллипс и прямоугольник со скруглением. Готовое свойство копируется одной кнопкой.
Фигура
Готовый CSS
Разобрать чужое значение
Как пользоваться
- Многоугольник для скосов и звёзд, круг и эллипс для аватарок, 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 в старых браузерах
Базовые фигуры поддерживаются всеми актуальными браузерами больше пяти лет. В браузере, который свойство не понял, элемент просто останется прямоугольным — вёрстка не разваливается, теряется только форма. Поэтому критичные элементы вроде кнопок обрезать не стоит.
Данные куда-то отправляются
Нет, всё собирается в браузере.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.