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

Как пользоваться

1. Выберите готовый пресет (треугольник, шеврон, трапеция, скошенные углы, стрелка, звезда) или соберите произвольный полигон.
2. Перетаскивайте маркеры точек на превью мышью или пальцем. Координаты в процентах мгновенно пересчитываются.
3. Переключайтесь между режимами «Полигон» (polygon), «Круг» (circle), «Эллипс» (ellipse) и «Внутренняя рамка» (inset).
4. Меняйте фон предпросмотра (градиент, фото, светлый, тёмный), чтобы оценить прозрачность срезанных областей, и нажмите «Копировать».

Как это работает

Что такое clip-path и как оно работает?

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

.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Синтаксис polygon() и система координат

Функция polygon(x1 y1, x2 y2, ...) принимает список точек через запятую. Отсчёт координат начинается из верхнего левого угла (0% 0%) и доходит до правого нижнего (100% 100%). Точки обычно задаются по часовой стрелке. Вместо процентов можно использовать любые единицы CSS (px, rem, vw), а также вычисления calc().

clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);

circle(), ellipse() и inset()

circle(radius at x y) создаёт круговой вырез с центром в указанной точке. ellipse(rx ry at x y) позволяет задавать разный радиус по горизонтали и вертикали. inset(top right bottom left round radius) создаёт внутреннюю рамку с отступами от краёв и поддерживает скругление углов ключевым словом round.

clip-path: circle(50% at center);
clip-path: inset(10px 20px round 12px);

Анимация clip-path

Формы clip-path отлично анимируются через transition и @keyframes, но с одним строгим условием: начальное и конечное состояние должны иметь одинаковое количество точек одного типа. Например, 4-точечный прямоугольник плавно переходит в 4-точечную трапецию, но превратить 3-точечный треугольник в 5-точечную звезду напрямую через CSS нельзя.

Особенности работы с тенями (box-shadow)

Важное ограничение: clip-path срезает и стандартный box-shadow элемента! Чтобы сделать тень вокруг сложной фигуры, используют filter: drop-shadow(...) на самом элементе или его обёртке — этот фильтр рассчитывает тень точно по контуру выреза.

.card {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

Частые вопросы