Генератор CSS Clip-Path

CSS clip-path приймає функцію polygon() з будь-якою кількістю пар координат x/y, а це означає, що вона може вирізати з блока форми, набагато складніші за прості прямокутники та кола, до яких зазвичай звертаються. Проблема в тому, що вписувати ці координати вручну втомливо і майже неможливо зробити правильно для чогось складнішого за базовий трикутник — цей генератор перетворює список координат на набір перетягуваних точок у живому прев'ю, тож форма, яку ви бачите, завжди відповідає формі, яку видає CSS.

Кожна точка у прев'ю зберігається як відсоток ширини й висоти блока — саме так насправді працює clip-path: polygon(): форма, побудована таким чином, зберігає правильні пропорції незалежно від того, якого розміру набуде елемент на реальній сторінці, від маленької іконки-маски до банера на всю ширину екрана. Перетягніть будь-яку точку, щоб змінити контур, клацніть близько до краю, щоб додати нову точку саме там, де клацнули, або двічі клацніть по наявній точці, щоб видалити її — редактор завжди зберігає щонайменше три точки, адже полігон не може існувати з меншою кількістю.

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

Завантажте власне зображення, щоб переглянути clip-path на реальному контенті замість простого блока, або пропустіть завантаження — тоді прев'ю переключиться на смугастий візерунок, щоб вирізана форма лишалася чітко видимою в будь-якому разі. Як і кожен інструмент на цьому сайті, все працює локально в браузері: жодне зображення ніколи не покидає ваш пристрій, а генератор продовжує працювати офлайн після завантаження сторінки.