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

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

clip-path обрезает элемент по контуру. Всё за пределами фигуры не рисуется и не кликается, поэтому это настоящая фигура, а не её изображение, — и это работает для любого элемента, включая изображения и видео.

Проценты, а не пиксели

Точки многоугольника задаются в процентах от собственной ширины и высоты элемента, поэтому фигура растягивается вместе с элементом, а не ломается при другом размере. Благодаря этому её можно использовать в адаптивной вёрстке.

Клики следуют за фигурой

Именно это отличает clip-path от декоративного наложения. Обрезанная область вообще не получает событий указателя, поэтому треугольная кнопка треугольна и для мыши, и для глаза.

Анимация между фигурами

Многоугольник может плавно переходить в другой многоугольник, только если в обоих указано одинаковое число точек. Обычный приём — дополнить более простую фигуру повторяющимися точками, чтобы числа совпали: треугольник, записанный четырьмя точками, две из которых совпадают, может превратиться в квадрат.

Строка с -webkit-

Современным браузерам нужно только свойство без префикса. Копия с префиксом включена, потому что некоторые старые версии Safari всё ещё её требуют, а оставить её ничего не стоит.

Чего он не делает

Он обрезает, но не перестраивает поток. Окружающий текст по-прежнему считает элемент исходным прямоугольником. Чтобы текст обтекал фигуру, нужен shape-outside, у которого тот же синтаксис.