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

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

1. Виберіть Форма: Багатокутник, Коло, Еліпс або Прямокутник. Блякла частина показує весь елемент, яскрава – те, що залишається видимим після обрізання.
2. Перетягуйте точки в редакторі. У багатокутника кожна точка – це вершина, а клацання будь-де в області додає точку на найближчому ребрі. Для кола чи еліпса перетягуйте центр і точки радіуса. Для прямокутника перетягуйте чотири точки на краях.
3. Уточнюйте значення в полях нижче: список Точки (X та Y у відсотках, з кнопками Видалити і Додати точку) для багатокутників або поля Радіус, Центр X, Центр Y, Верх, Право, Низ, Ліво та Заокруглені кути (px) для інших форм.
4. Швидше почати допоможуть Шаблони: трикутник, трапеція, паралелограм, ромб, п’ятикутник, шестикутник, восьмикутник, зріз, зірка, хрест, стрілки, шеврон, хмаринка діалогу, коло, еліпс і прямокутник.
5. Позначте Прив’язка до 5 % для охайних значень і Додати -webkit-clip-path (старий Safari), якщо ви досі підтримуєте Safari 13.0 або старіший.
6. За бажання перетягніть фото в Фонове зображення (необов’язково), щоб побачити форму на власному зображенні. Файл ніколи не завантажується на сервер.
7. Скопіюйте CSS-код кнопкою Копіювати.

Клавіатура: наведіть фокус на точку, переміщуйте її стрілками (на 1 %, а із Shift – на 10 %) і натисніть Delete, щоб видалити точку багатокутника. У багатокутнику залишається щонайменше три точки.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Функції форм clip-path

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

• polygon(x1 y1, x2 y2, …) з’єднує точки по черзі й замикає форму. polygon(50% 0%, 100% 100%, 0% 100%) – трикутник, спрямований угору. Координати відраховуються від лівого верхнього кута елемента.
• circle(r at cx cy): circle(50% at 50% 50%) – найбільше коло з центром в елементі. Радіус у відсотках відраховується від діагоналі елемента, поділеної на √2, тож він дорівнює частці ширини лише для квадратних елементів.
• ellipse(rx ry at cx cy): горизонтальний радіус – частка ширини, вертикальний – частка висоти.
• inset(top right bottom left round radius) вирізає прямокутник усередині країв за тим самим скороченим записом із одного–чотирьох значень, що й відступи, з необов’язковими заокругленими кутами.

Цей інструмент записує відсотки, тому форма масштабується разом з елементом незалежно від його розміру.

Поради щодо вдалих форм

• Порядок точок багатокутника має значення: якщо обходити край за годинниковою стрілкою (або проти неї), форма не матиме самоперетинів на кшталт «метелика».
• Форми з однаковою кількістю точок можна анімувати: transition: clip-path 0.4s плавно перетворює один шестикутник на інший. Браузер не вміє інтерполювати багатокутники з різною кількістю точок.
• clip-path обрізає також box-shadow і рамки. Щоб додати тінь до обрізаної форми, застосуйте filter: drop-shadow() до батьківського елемента.
• Обрізані ділянки не реагують на клацання й наведення, що зручно для кнопок неправильної форми.