CSS Clip-Path Generator

Четыре базовые функции: circle() — круг, ellipse() — эллипс, inset() — прямоугольник с отступами и скруглением, polygon() — произвольный многоугольник. Также поддерживается path() для SVG-путей и url() для ссылки на SVG clipPath.

clip-path анимируется через transition и @keyframes, если начальная и конечная формы используют одну функцию с одинаковым числом точек. Например, polygon с 4 точками можно плавно трансформировать в другой polygon с 4 точками. Для сложных переходов используйте GSAP или Web Animations API.

clip-path скрывает пиксели визуально, но элемент сохраняет свои размеры в потоке документа. Клики за пределами обрезки по умолчанию всё ещё срабатывают. Добавьте pointer-events: none к обрезанным областям, если нужно ограничить интерактивность.

Базовые фигуры (circle, ellipse, inset, polygon) поддерживаются во всех современных браузерах. Для Safari и старых версий Chrome добавляйте -webkit-clip-path. Функция path() имеет ограниченную поддержку — проверяйте Can I Use для вашей целевой аудитории.