Демонстрації нижче фокусовані на використанні різних видів багатокутників у дизайні. Синтаксис для інших базових фігур (таких як прямокутник, коло та еліпс) досить простий, і ви можете використовувати тільки їх. Багатокутники, однак, відчиняють двері практично нескінченному числу фігур.
Синтаксис для базового багатокутника такий:
.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%, 00, 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, який нам потрібно буде вставити в будь-якому місці розмітки.
<code data-language="html"><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.