Четыре функции формы
| Функция | Для чего годится |
| --- | --- |
| polygon() | всё угловатое — стрелки, шевроны, диагональные границы секций |
| circle() | круглая обрезка и анимации раскрытия |
| ellipse() | широкая мягкая обрезка, изогнутые разделители секций |
| inset() | прямоугольная обрезка, при желании со скруглением |
Про inset() обычно забывают. Это простейший способ срезать фиксированное поле
по краям, и он принимает ключевое слово round для радиусов углов.
Диагональная граница секции без картинки
Самое частое реальное применение — скошенная граница между двумя секциями во всю ширину:
.section {
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
Это прямоугольник с поднятым на 8% правым нижним углом. Ни картинки, ни SVG-маски, и масштабируется на любую ширину экрана.
Разметка не меняется
Это удивляет. Обрезанный элемент по-прежнему занимает всю ширину и высоту в потоке, поэтому треугольник, вырезанный из блока в 400 px, всё равно резервирует 400 px. Закрывайте визуальный зазор отрицательными отступами — или миритесь с ним.
Как это деградирует
clip-path поддерживается всеми актуальными браузерами. В чём-то совсем древнем
элемент просто отрисуется необрезанным — полным прямоугольником. Для декора это
безопасный отказ, а вот если обрезка что-то скрывает — опасный: никогда не
прячьте контент таким способом.
Экспорт в SVG
Полигон можно скачать как SVG-путь — это удобно, когда та же форма нужна как маска, иконка или объект в графическом редакторе. Всё генерируется в браузере.
Вопросы
Влияет ли clip-path на вёрстку?+
Нет. Он обрезает отрисовку, а не разметку: элемент занимает весь свой блок, и окружающий контент обтекает полный прямоугольник. Чтобы текст обтекал видимую форму, нужен ещё и `shape-outside`.
Проходят ли клики по обрезанным областям?+
Нет, и это один из по-настоящему полезных побочных эффектов. События указателя останавливаются на границе обрезки, поэтому треугольная кнопка кликабельна только внутри треугольника.
Проценты или пиксели?+
Почти всегда проценты. Они отсчитываются от собственного блока элемента, поэтому форма корректно масштабируется при изменении размера. Пиксельные координаты ломаются, как только вёрстка становится адаптивной.
Можно анимировать clip-path?+
Да, между двумя полигонами с одинаковым числом точек — браузер интерполирует каждую. Разное число точек не анимируется, поэтому проще дополнить простую фигуру дублирующимися точками, чем тянуть библиотеку.