Использование и синтаксис clip-path

Демонстрации ниже фокусированы на использовании разных видов многоугольников в дизайне. Синтаксис для других базовых фигур (таких как прямоугольник, круг и эллипс) довольно прост и вы можете использовать только их. Многоугольники, однако, открывают дверь практически бесконечному числу фигур.

Синтаксис для базового многоугольника таков:

.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, …); }

Каждая пара аргументов в списке соответствует координатам по оси x и по оси y конкретной вершины многоугольника.

Вот как мы напишем это в реальном мире (исключив префикс для WebKit):

.element { clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%); }

Добавим поддержку Firefox с указателем на встроенный SVG:

.element { clip-path: url("#clip-shape"); }

Вот как будет выглядеть наш селектор с кроссбраузерной поддержкой:

.element {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
  -webkit-clip-path: url("#clip-shape"); /* требуется для браузеров Webkit/Blink, если вы используете только встроенный SVG, а не clip-path */
  clip-path: url("#clip-shape");
}

Ниже приведён код встроенного SVG, который нам нужно будет вставить в любом месте разметки.

<svg width="0" height="0">
  <defs>
  <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
  <polygon points="0 1, 0 0, 1 0, 0.8 1" />
  </clipPath>
  </defs>
</svg>

Вот заключительная демонстрация.

See the Pen Clip-path: Demo by Karen Menezes (@imohkay) on CodePen.

Вы можете создать адаптивный обтравочный контур SVG следующим образом:

• Установите ширину и высоту SVG как 0.
• Установите идентификатор для элемента clipPath внутри SVG, на который затем можно ссылаться из CSS. Вы можете использовать встроенный или внешний SVG, помня про упомянутую выше поддержку браузерами.
• Повторно используйте процентные значения координат многоугольника, определённого с помощью clip-path. Просто разделите их на 100 и добавьте как безразмерные точки многоугольника в SVG. Установите значение атрибута clipPathUnits как objectBoundingBox, чтобы обтравочный контур помечал границы элемента HTML, который на него ссылается.

У Дадли Стори больше написано об этом процессе.

Давайте посмотрим на демонстрацию, чтобы понять, как строить координаты для многоугольника.

Ниже у нас есть обрезанное изображение. Фоновый цвет показывает размеры исходного изображения. Чёрные прямоугольники с координатами — это просто абсолютно позиционированные <div>, положения которых соответствуют вершинам многоугольника в процентах. Вы увидите, что они сохраняют свои позиции, даже если вы уменьшите ширину окна браузера (например, до 400 пикселей или меньше).

See the Pen Clip-path: Polygon coordinates by Karen Menezes (@imohkay) on CodePen.