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

Проєктуйте фігури CSS clip-path візуально

Властивість clip-path дає змогу вирізати з елемента майже будь-яку фігуру лише засобами CSS. Шестикутні аватари, скошені краї розділів, кнопки у формі стрілок і хмарки діалогів можна створити без зображень і додаткової розмітки. Проте вписувати координати полігона вручну — справа виснажлива. Цей генератор надає живий попередній перегляд із перетягуваними маркерами, тож ви можете сформувати елемент і скопіювати готову декларацію.

Полігони, кола, еліпси та inset

Інструмент підтримує основні функції базових фігур. polygon() приймає список точок, записаних як відсотки x та y, що ідеально підходить для трикутників, трапецій, зірок і стрілок. circle() та ellipse() приймають радіус і положення центру, а inset() обрізає елемент усередину від кожного краю блоку з необов'язковим радіусом заокруглення кутів. Оберіть пресет як відправну точку й доопрацюйте його. Для полігонів перетягуйте будь-який маркер, щоб перемістити вершину, або наведіть на маркер фокус і використовуйте клавіші зі стрілками для точних кроків в один відсоток, утримуючи Shift для більших стрибків.

Поради щодо використання clip-path

Оскільки всі значення задано у відсотках, фігура масштабується разом з елементом, що робить її чудово придатною для адаптивних макетів. Пам'ятайте, що clip-path впливає лише на відмальовування: рамки й тіні box-shadow поза фігурою теж обрізаються, тому використовуйте елемент-обгортку з filter: drop-shadow(), якщо потрібна тінь, що повторює фігуру. Також можна анімувати перехід між двома полігонами з однаковою кількістю точок за допомогою CSS-переходів для плавних ефектів морфінгу. Згенерований код — це один рядок, який можна вставити в будь-яку таблицю стилів, а все редагування відбувається локально у вашому браузері.