◇

Генератор 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 работает без префиксов.