Softonic

Генератор CSS clip-path

Шаг 1 / 2
Далее

С помощью clip-path можно вырезать любой элемент в форме многоугольника, создавая фигурные изображения, асимметричные hero-блоки или речевые пузыри без SVG-наложений. Ручное написание координат polygon() ведет к ошибкам в расчетах. Этот генератор выдает корректное объявление clip-path для четырех готовых фигур: треугольника, ромба, трапеции и шестиугольника. Выберите фигуру, сгенерируйте код и скопируйте его.

Как построить clip-path

  1. 1

    Выберите фигуру

    Выберите одну из четырех заготовок: треугольник, ромб, трапецию или шестиугольник.

  2. 2

    Сгенерируйте CSS

    Нажмите кнопку, и инструмент соберет правило `clip-path: polygon(...)` для выбранной фигуры.

  3. 3

    Скопируйте правило

    Скопируйте результат и вставьте его в таблицу стилей. Проценты делают фигуру адаптивной к размеру элемента.

  4. 4

    Прочитайте координаты

    Каждая пара чисел это вершина: позиция x и y этого угла в процентах от рамки элемента.

  5. 5

    Примените

    `clip-path` работает на любом элементе во всех современных браузерах, а фигура масштабируется вместе с элементом.

Пять функций формы

Функция Синтаксис Применение
inset() inset(10% 20% 10% 20% round 8px) Прямоугольная обрезка с отступами и необязательным скруглением углов
circle() circle(50% at 50% 50%) Круг
ellipse() ellipse(40% 25% at 50% 50%) Эллипс
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Любой многоугольник
path() path("M0 0 L100 0 L50 100 Z") Данные SVG-контура (ограниченная поддержка)

Распространённые многоугольные клипы

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Диагональный срез у hero-секции, пожалуй, самый ходовой из всех: он придаёт секции современный наклонный вид без единого SVG.

Анимация clip-path

Анимация clip-path работает, пока оба состояния используют одну и ту же функцию формы с одинаковым числом точек. Многоугольник с 4 вершинами плавно анимируется в другой многоугольник с 4 вершинами; добавление или удаление вершин ломает интерполяцию.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Применяйте это для эффектов появления, едва заметных искажений при наведении или переходов между страницами.

clip-path и overflow: hidden

overflow: hidden обрезает по прямоугольнику border-box (его можно скруглить через border-radius). clip-path обрезает по любой заданной вами форме и обрезает всё, включая тени и контуры. Если нужно, чтобы тени оставались видимыми за пределами фигуры, clip-path вам не подойдёт.

filter: drop-shadow() позволяет вернуть тень, повторяющую форму, для элементов с clip-path, но работает медленнее.

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

В современных браузерах clip-path ускоряется средствами GPU, поэтому анимированные clip-path работают плавно. Исключение, path() и очень сложные многоугольники (более 40 вершин), которые в некоторых браузерах переходят на отрисовку силами CPU.

Доступность

clip-path меняет только то, что видно. Скринридеры, фокус с клавиатуры и события указателя следуют за полным боксом элемента, а не за обрезанной фигурой. Если изображение обрезано в форме звезды, alt-текст читается как обычно. Если кнопка обрезана в форме шеврона, областью клика остаётся весь прямоугольник, а не видимый шеврон, из-за чего возможны случайные клики по, казалось бы, пустому месту.

Для кнопок с необычной обрезкой задавайте ширину и высоту элемента впритык, чтобы область клика как можно точнее совпадала с видимой частью.

Часто задаваемые вопросы

Все современные браузеры (Chrome, Firefox, Safari, Edge) поддерживают polygon(), circle(), ellipse() и inset(). path() поддерживается в Chrome 88+, Firefox 97+ и Safari 13.1+. IE не поддерживает ничего из этого, но его доля на большинстве сайтов сейчас ниже порога значимости.

Потому что clip-path обрезает тени вместе со всем остальным. Используйте вместо этого filter: drop-shadow(), он повторяет обрезанную форму и сохраняет тень видимой.

Только между одной и той же функцией формы с одинаковым числом точек. Многоугольник с 4 точками анимируется в другой многоугольник с 4 точками. Добавление или удаление точек, а также смена функции (например, с многоугольника на круг) ломают интерполяцию.

Нет, события указателя по-прежнему приходятся на весь прямоугольник элемента. У кнопки в форме звезды область клика остаётся прямоугольной, включая прозрачные углы. Если это важно, добавьте pointer-events: none на ::before или используйте элементы с плотно подогнанными размерами.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Инструмент доступен на других языках