Генератор clip-path
Обрізайте елементи за формою — оберіть пресет багатокутника й перетягуйте його точки або використайте коло, еліпс чи inset.
Координати перетворюються на objectBoundingBox (0–1), тож обрізка масштабується разом із будь-яким елементом. Фігури на кшталт <polygon>, <rect>, <circle> автоматично стають контурами, а трансформації вбудовуються в координати.
Перетягуйте точки на прев'ю, щоб змінити форму багатокутника.
Як працює генератор clip-path
Створюйте форми clip-path візуально з пресетами багатокутників і рухомими точками, а потім копіюйте адаптивний CSS у відсотках.
Бібліотека пресетів
Дванадцять пресетів багатокутників — трикутники, стрілки, зірки, хмарки повідомлень — а також базові форми: коло, еліпс та inset. Почніть із форми, найближчої до потрібної.
Рухомі точки
Кожна вершина багатокутника — це маркер на живому перегляді. Перетягуйте, щоб змінити форму, додавайте проміжні точки для деталей і прибирайте зайві — CSS оновлюється під час руху.
Перегляд із «привидом»
Обрізана частина лишається видимою як блідий «привид», тож ви завжди бачите, що саме форма відтинає від початкового елемента.
Координати у відсотках
Усі координати задано у відсотках, тож той самий clip-path масштабується з елементом будь-якого розміру — головними зображеннями, картками чи секціями на всю ширину.
Часті запитання
clip-path задає видиму область елемента — усе поза формою приховано. Він працює з будь-якими елементами, зокрема зображеннями й відео, і впливає на обробку кліків: кліки поза формою проходять крізь елемент.
Відсоткові координати відраховуються від розмірів елемента, тож одне значення працює за будь-якого розміру й лишається адаптивним. Піксельні координати зламаються, щойно елемент змінить розмір.
Так — переходи між двома багатокутниками з однаковою кількістю точок анімуються плавно, а в сучасних браузерах їх виконує композитор. На цьому будують ефекти появи й морфінг форм.
clip-path — векторна форма з чіткими краями; mask-image підтримує м'які градієнти прозорості й зображення. Для чітких геометричних вирізів clip-path простіший і легший.