Генератор CSS Clip-Path
Малюйте довільні багатокутні фігури — зокрема увігнуті вирізи — перетягуючи точки в області попереднього перегляду або на власному зображенні, і копіюйте отриманий код CSS clip-path: polygon(...)
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
CSS clip-path приймає функцію polygon(), яка складається з довільної кількості пар координат x/y, а це означає, що вона може вирізати з прямокутника фігури, які далеко виходять за межі простих прямокутників і кіл, до яких зазвичай вдаються. Проблема в тому, що вводити ці координати вручну нудно і майже неможливо зробити правильно для чогось складнішого за простий трикутник — цей генератор перетворює список координат на набір точок, які можна перетягувати на інтерактивному попередньому перегляді, тому фігура, яку ви бачите, завжди є фігурою, яку створює CSS.
Кожна точка попереднього перегляду зберігається як відсоток від ширини та висоти прямокутника — саме так clip-path: polygon() і працює всередині: фігура, створена таким чином, зберігає правильні пропорції незалежно від того, якого розміру елемент опиниться на справжній сторінці — від маленької маски іконки до повноширокого банера. Перетягніть будь-яку точку, щоб змінити обрис, клацніть біля ребра, щоб додати нову точку саме там, де ви клацнули, або двічі клацніть існуючу точку, щоб видалити її — редактор завжди зберігає щонайменше три точки, оскільки багатокутник не може існувати з меншою кількістю.
Шість вбудованих пресетів підібрано, щоб довести, що clip-path може більше, ніж опуклі форми: зірка і стрілка використовують зворотні кути, спрямовані всередину, мовна бульбашка вирізає трикутний хвостик зі звичайного прямокутника, а вирваний квиток робить дві виїмки з протилежних країв, як у справжнього перфорованого квитка. Завантажте будь-який пресет і продовжуйте перетягувати — ніщо в редакторі не прив'язує вас до початкової форми.
Завантажте власне зображення, щоб переглянути clip-path на реальному вмісті, а не на однотонному прямокутнику, або не завантажуйте взагалі — тоді попередній перегляд покаже смугастий візерунок, щоб вирізана форма залишалася добре видимою в будь-якому разі. Як і всі інструменти на цьому сайті, цей повністю працює локально в браузері: жодне зображення не залишає вашого пристрою, а генератор продовжує працювати офлайн після завантаження сторінки.