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

Що таке Генератор CSS clip-path?

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

Як користуватися Генератор CSS clip-path

1. Виберіть форму у випадному списку пресетів: коло, еліпс, багатокутник, inset або заокруглений.
2. Для кола чи еліпса задайте радіус (або радіуси X/Y) і положення центра X/Y у відсотках.
3. Для багатокутника відредагуйте X і Y кожної вершини у відсотках; натисніть «Додати точку», щоб додати нові вершини, і змініть порядок, редагуючи значення.
4. Для inset чи заокругленого задайте відступи зверху, справа, знизу та зліва; заокруглений також приймає радіус кута.
5. Спостерігайте, як живий попередній перегляд обрізає блок під час введення.
6. Скопіюйте згенерований CSS clip-path і вставте його у свою таблицю стилів.

Приклади

Пресет коло, радіус 50%, центр 50% 50%

clip-path: circle(50% at 50% 50%);

Пресет багатокутник, точки (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Пресет заокруглений, inset 10% з усіх боків, радіус кута 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Поширені запитання

Для чого використовується clip-path?

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

Як працює пресет багатокутника?

polygon() малює фігуру, зʼєднуючи по порядку список вершин X/Y. Відредагуйте відсоткові значення кожної точки й використовуйте «Додати точку», щоб вставити більше вершин; остання точка автоматично зʼєднується з першою. Зберігається щонайменше три точки, щоб фігура лишалася коректною.

Чому значення вказані у відсотках?

Відсотки роблять так, що обрізання масштабується разом з елементом, тож той самий clip-path працює за будь-якого розміру. 0% — це лівий або верхній край, а 100% — правий або нижній край блоку елемента.

Що додає заокруглений пресет?

Заокруглений пресет використовує inset() з радіусом кута round, створюючи прямокутник, обрізаний усередину з кожного боку та із заокругленими кутами — зручно для мʼяких обрамлених обрізок, які звичайний border-radius не може поєднати з обрізанням inset.

Чи надсилаються мої дані кудись?

Ні. Генератор працює повністю у вашому браузері на JavaScript — значення вашої фігури ніколи не залишають пристрій, тож він працює приватно й навіть офлайн після завантаження сторінки.