Кожна демонстрація використовує clip-path із CSS, але в розмітці також міститься вбудований SVG із класом clip-svg, який просто скидає ширину та висоту SVG до 0. Ви також можете видалити цей клас і задати атрибути width та height безпосередньо в розмітці SVG.
Приклад 1: Обрізка зображень різними багатокутниками
Якщо вам потрібне швидке визначення багатокутника — це замкнута двовимірна фігура, що складається з прямих ліній.
Таким чином, фігура не може бути багатокутником, якщо вона містить закруглення, відкрита або складається менше, ніж із трьох ліній. Найбільш відомі багатокутники в історії — це трикутники, чотирикутники, п'ятикутники і шестикутники. Навіть зірки є багатокутниками, оскільки межі багатокутника можуть перетинати один одного.
Примітка. Зображення у цій демонстрації адаптивні. Використовуючи хороше рішення для адаптивних зображень img { max-width: 100%; height: auto; }, а також адаптивні відсічні контури через CSS та SVG, ми робимо наші багатокутники чудово масштабованими.
Дана демонстрація є результатом вправи для розуміння побудови координат при створенні багатокутників. У демонстрації нижче я додала кілька фігур, які ви можете використати у своїх проектів. При наведенні на кожне зображення ви побачите співвідношення сторін вихідного зображення.> для візуалізації фігур — графічним інтерфейсом від Беннетта Фелі. Координати всіх існуючих фігур представлені у відсотках, також є можливість додавання власного багатокутника. Ви можете використовувати Clippy для створення обрізаних фігур та свого SVG на їх основі для кращої підтримки у браузерах.
See the Pen Clip-path: Polygon shapes by webref (@webref) on CodePen.
Приклад 2: Анімація базових фігур через transition
Наведіть курсор на фіолетовий шестикутник і він перетвориться на восьмикутник. Однак заданого ефекту переходу не відбудеться.
See the Pen Clip-path: shape transition: Part 1 by webref (@webref) on CodePen.
Причина пояснюється в стаття Сари Суейдан про анімацію фігур через CSS: «Число точок, що визначають кінцеву фігуру, має бути таким самим, як число точок, що визначають початкову фігуру». Цілком логічно!
Оскільки шестикутник містить шість пар координатних точок, давайте додамо дві пари через дублювання, щоб їх стало вісім і вони відповідали числу пар для восьмикутника. Ці дубльовані пари не будуть впливати на форму шестикутника.
Ось опис шестикутника з шістьма парами координатних точок:
clip-path: polygon(50 % 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
А це опис шестикутника з вісьмома парами координат, перші дві з яких були дубльовані: clip-path: polygon(50% 0%, 50% 0%, 100% 25%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
Тепер перехід при трансформації фігур буде плавним, як видно в демонстрації нижче.
Зверніть увагу, що для браузерів, які підтримують відсічні контури тільки на SVG, нам потрібно додати анімацію SMIL, щоб отримати безшовний перехід при наведенні. Згідно специфікації SMIL, декларативні анімації можуть застосовуватися для анімації ліній і точок багатокутника в SVG, що в даний час неможливо за допомогою CSS. Майте на увазі, що деякі люди обговорюють застарілі SMIL у Chrome та Chromium і приділяють особливу увагу впровадженню Web Animations API, який, на жаль, знаходиться на стадії робочого проекту.
У демонстрації нижче (фонове зображення надане morgueFile), ви можете бачити, як ми анімували точки багатокутника між mouseover та mouseout протягом 0,2 секунд. Придивіться до тега <animate> у розмітці SVG.
See the Pen Clip-path: shape transition: Part 2 by Karen Menezes (@imohkay) on CodePen.
Приклад 3. Додавання рамки до обрізаного об'єкту
Для скорочення оповідання — межі, контури та тіні, що лежать за межами області відсікання, віддаляються.
Мені було трохи сумно від цього, і я попитала членів W3C по робочій групі CSS . Однак висновок у тому, що немає способу зробити це під час використання базових фігур. Дірк Шульцe так відповів на моє запитання: «Так, всі операції малювання з елементом відсікаються. Сюди входять контури та межі».
Дивіться демонстрацію нижче. Наведіть вказівник на ромбоїд з неповною рамкою, щоб побачити вихідну, необрізану версію з цілою рамкою.
See the Pen Clip-path: Borders by Karen Menezes (@imohkay) on CodePen.
Звичайно, ми завжди можемо використовувати прийом, до якого я нарешті прийшла, і отримати рамку за допомогою генерованого вмісту.
У демонстрації нижче створюється копія елемента через псевдоелемент ::after і потім він позиціонується абсолютно. Це створює ілюзію рамки, дозволяючи нам моделювати цікаві ефекти, такі як градієнтна рамка на другому восьмикутнику та внутрішня тінь через фільтр CSS на третьому (не дуже витончено, але функціонально). Зверніть увагу, що фільтри CSS в даний час працюють тільки у Firefox та браузерах WebKit та Blink.
See the Pen Clip-path: Border simulation by Karen Menezes (@imohkay) on CodePen.
Приклад 4: Використання clip-path для створення ромбоподібної сітки
Нижче наведене зображення, яке будемо використовувати.
Ось ефект, якого ми прагнемо. При наведенні вказівника на нижні три блоки ви побачите, що колір фону зникає і проступає зображення.
Фактичний розмір зображення складає 600×600 пікселів. Так що почнемо з чотирьох порожніх <div> по 300 пікселів кожен і застосуємо до них одне й те саме фонове зображення. Потім додамо батька розміром 604 пікселя і скомпонуємо зображення за допомогою inline-block.
Тепер змінимо значення властивості background-position для кожного зображення на top, left, right та bottom, відповідно.
Обріжемо кожен блок у вигляді ромба і накладемо абсолютно позиціонований шар з деяким текстом на кожне з нижніх трьох зображень.
Тепер перемістимо зображення по рядах — друге і третє зображення в один ряд, а перше та четверте в окремі ряди.
Нарешті, використовуємо негативні margin для зміщення другого та третього рядків, щоб вони вишикувалися як в остаточній демонстрації нижче. Ми можемо видалити значення ширини 604 пікселя у батька і переробити медіа-запит, щоб чотири ромби складалися в колонку на маленьких екранах і ряди на великих.
See the Pen Clip-path: Diamond grid by Karen Menezes (@imohkay) on CodePen.
Під час роботи над цією демонстрацією я помітила помилку в Chrome, пов'язану з подіями вказівника, вони відправлялися за межами області відсікання, що порушує специфікацію: «За умовчанням події вказівника не до повинні вирушати за межами обрізаної (невидимої) області». Я повідомила про цю помилку. Проблема з цією демонстрацією була вирішена за допомогою властивості pointer-events зі значенням none для класу overlay . В якості альтернативи ви можете застосувати те саме значення clip-path до overlay для обходу проблеми.
Через негативні margin ця демонстрація виглядатиме дивно в браузерах, які не підтримують clip-path. Отже, бажано використовувати якусь перевірку перед застосуванням margin (але сама я з цим не експериментувала) або @supports, хоча не рекомендувала б останнє у робочому коді.
Приклад 5. Створення фіктивної сторінки профілю на шестикутниках
Наша фінальна сторінка має виглядати так:
<
Почнемо з додавання фонової картинки у вигляді шестикутних плиток до body (зображення люб'язно надане Subtle Patterns).
Значення clip-path для шестикутника можуть бути отримані з однієї з демонстрацій вище або за допомогою інструмента Clippy.
Перший шестикутник використовує фонове зображення (бо ми змішуємо тьмяний бордовий колір з фоном за допомогою властивості background-blen d-mode). Використовуючи вміст, що генерується, абсолютно позиціонований елемент обрізається до бордового трикутника, його ви можете бачити знизу. Він зникає при наведенні.
Для другого шестикутника зі словом «work» просто задано темно-сірий фон, який змінюється при наведенні.
Третій шестикутник містить градієнтну рамку, аналогічну тій, що показана у демонстрації при створенні рамок на clip-path.
Шестикутники вертикально вишиковуються на маленьких екранах і вирівнюються по центру на великих. Я використовувала комбінацію display: table, абсолютного позиціонування та трансформації. Звичайно, ви можете скористатися flexbox, float або чимось ще, що змусить ваш човен плавати.
От заключна демонстрація.
See the Pen Clip-path: Hexagon shapes for dummy profile page by Karen Menezes (@imohkay) on CodePen.
Я виявила помилку з clip-path під час створення цієї демонстрації. Зміна значення opacity у поєднанні з переходом CSS викликає мерехтіння та артефакти на сторінці. Пам'ятайте про це, якщо використовуєте clip-path для прогресивного покращення дизайну.
Також є інша помилка з clip-path та властивістю backface-visibility, коли воно встановлено як hidden. Ця помилка задокументована у Chromium і мені вдалося відтворити її за допомогою синтаксису базових фігур у Chrome під Linux. Майте це на увазі, якщо використовуєте clip-path для створення класного тривимірного розвороту або чогось, що використовує тривимірну трансформацію CSS.
У той час як відсікання за допомогою SVG безперечно перемагає через гнучкість та можливості, воно не порівняється за простотою, з якою елементи можуть бути обрізані за допомогою CSS. Фактично, ті самі координати багатокутників можуть бути легко перероблені для створення адаптивного SVG для ще кращої підтримки в браузерах.
Завдяки clip-path ви можете значно змінити Зовнішній вигляд сторінки, не турбуючись про старі браузери, де сторінка витончено деградуватиме. ».