◇

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

Обрізайте елемент у поширені фігури та копіюйте CSS clip-path.

Ваші файли залишаються на цьому пристрої

Файли обробляються у браузері й не надсилаються на сервер. Сайт завантажує код і ресурси для роботи інструментів. Без акаунтів і трекерів.

Натисніть «Завантажити», щоб зберегти інструмент одним HTML-файлом для роботи офлайн.

Конфіденційність →

Фігура

результат

Спробуйте розібраний приклад

Приклад

Виберіть форму шестикутника, щоб отримати clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Кожна пара — це координати x і y всередині елемента, тож фігура розтягується разом з його шириною та висотою.

Зважайте

Обрізання ховає частину елемента, але зберігає його блок у розкладці: сусіди не зміщуються, а приховані кути перестають реагувати на кліки. Рамки й тіні блоку теж обрізаються; для тіні застосуйте фільтр drop-shadow до обгортки.

Про цей інструмент

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

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

Як працюють полігональні clip-path?

Кожна точка — це пара відсотків x y відносно блока; браузер з'єднує їх по порядку та показує лише область усередині контуру.

Чи всі браузери підтримують clip-path?

Фігури polygon, circle, ellipse та inset підтримуються в усіх сучасних браузерах, тож згенерований CSS працює без префіксів.