CSS Clip-Path Generator

clip-path задаёт видимую область элемента, обрезая всё за пределами фигуры. Позволяет создавать нестандартные формы без PNG-масок: скошенные секции, круговые аватарки, декоративные блоки. Работает с любым HTML-элементом и изображениями.

Четыре базовые функции: 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 для вашей целевой аудитории.