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

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

Що це за інструмент?

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

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

Джерело: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — специфікації, що визначають clip-path і його функції базових форм.

Навіщо його використовувати?

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

Як користуватися

Оберіть форму зі спадного списку — коло, еліпс, трикутник, п'ятикутник, шестикутник, зірка чи заокруглений прямокутник.
Для кола, еліпса й заокругленого прямокутника налаштуйте повзунок розміру/заокруглення, щоб точно підлаштувати обрізку.
Спостерігайте, як блок попереднього перегляду оновлюється наживо при зміні форми чи повзунка.
Скопіюйте згенерований CSS для clip-path і вставте його в елемент, який потрібно обрізати.
Для зображення замість суцільного кольору застосуйте ту саму властивість clip-path до <img> чи елемента з background-image.

Приклад

Введення

Форма: шестикутник

Результат

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Обрізка правильним шестикутником, часто використовується для фото профілю у стилі значка чи функціональних іконок.

Базові форми проти polygon()

Circle, ellipse та inset (заокруглений прямокутник) — вбудовані базові функції форм CSS із власним простим синтаксисом: один-два радіуси плюс опційна позиція центру чи заокруглення кутів. Trіangle, pentagon, hexagon і star не є вбудованими формами; усі вони записуються через polygon(), плаский список пар координат x/y, що обводять контур форми. Цей інструмент автоматично обчислює ці координати для правильних (рівномірно розташованих) багатокутників і п'ятикутної зірки — саме це найважче правильно порахувати вручну.

Поширені патерни clip-path

Круглий аватар чи значок: circle() з середнім радіусом, часто у поєднанні з квадратним вихідним зображенням, щоб коло не розтягувалося в еліпс.
Розділювач секцій під кутом: кастомний polygon (тут не входить до готових форм), що нахиляє верхній чи нижній край секції на всю ширину для нестандартного розриву сторінки.
Форма значка чи іконки зірки-рейтингу: готова форма зірки, корисна як декоративна форма замість намальованого вручну SVG для простих випадків.
Шестикутна фотогалерея: обрізані шестикутником зображення, розташовані у стільниковій сітці, — поширений патерн для портфоліо чи сторінок команди.
Заокруглений прямокутник як легка альтернатива border-radius, коли потрібно, щоб обрізка також відсікала переповнений дочірній контент, оскільки сам по собі border-radius не обрізає дітей без додаткового overflow:hidden.

Поєднання з іншими CSS-інструментами

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

→ Генератор CSS-градієнтів · Генератор border-radius · Генератор box-shadow

Часті запитання

Чи впливає clip-path на розмір макета елемента?

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

Чому box-shadow не відображається на моїй обрізаній формі?

clip-path обрізає весь рендеринг елемента, включно з будь-якою тінню, яку він відкидає, тож власна box-shadow елемента, обрізаного за колом чи багатокутником, обрізається на межі обрізки. Щоб отримати тінь, що повторює видиму форму, застосуйте box-shadow до необрізаного обгортаючого елемента навколо обрізаного.

Чи можна анімувати форму clip-path чи додати перехід?

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

Чи можна застосовувати clip-path до фонових зображень, а не лише до вмісту елемента?

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

Чи підтримується clip-path у всіх сучасних браузерах?

Так — clip-path з функціями базових форм (circle, ellipse, inset, polygon) широко доступний (Baseline) в основних браузерах з січня 2020 року, за даними сумісності MDN. Його загалом безпечно використовувати в продакшені без запасного варіанту для поточних версій браузерів.