Генератор путей обрезки CSS Clip-Path

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

Сообщить об ошибке

Режим выполнения в браузере: Ваши данные обрабатываются в браузере и не загружаются на сервер.

Скорость и стабильность: Скорость обработки зависит от вашего устройства и браузера. Для больших пакетов настольная версия может быть стабильнее.

Загрузка инструмента, подождите...

Если онлайн-инструмент не загружается или не запускается, попробуйте настольный инструмент. https://tools.yikeaigc.com/

Использование инструмента

Вернуться к старой версии

Сначала задайте контур, затем копируйте код или обрабатывайте изображения

После выбора пресета можно перетаскивать точки многоугольника, переключиться на круг, эллипс или inset и настроить параметры. Пакетная обработка использует текущий контур; при загрузке нескольких изображений показаны только первые 20, но обработаны будут все.

Информация о текущем контуре

Типpolygon

Контрольные точки3

Подсказка: сначала настройте контур, затем копируйте код или обрабатывайте изображения.

Предпросмотр В режиме многоугольника перетаскивайте синие точки; координаты сразу формируют CSS.

Координаты: относительно элемента, левый верхний угол — 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Форма и пресеты Сначала выберите тип, затем настройте параметры

Тип формы

Категории

Параметры контура Значения могут быть в процентах

Текст координат

Радиус

Центр X

Центр Y

Горизонтальный радиус

Вертикальный радиус

Центр X

Центр Y

верх

право

низ

лево

Скругление

Предпросмотр и вывод Фон влияет только на предпросмотр и экспорт изображения

Ширина предпросмотра (px)

Высота предпросмотра (px)

Цвет A

Цвет B

Угол градиента

Предпросмотр

Показать границы элемента Включить префикс -webkit Создать селектор класса

Создать код

Код обновляется в реальном времени.

Применить текущий путь пакетно Сначала настройте путь на предыдущем шаге, затем выберите обработку изображений.

Нажмите или перетащите изображения Поддерживаются JPG, PNG, WebP, GIF, BMP и другие форматы

Изображения не выбраны.

Настройки вывода PNG поддерживает прозрачный фон

Формат вывода

Режим размера

Ограничить длинную сторону (px)

Своя ширина (px)

Своя высота (px)

Качество вывода92%

Вне обрезки — прозрачно Использовать текущий контур

Ожидание обработки.

Предпросмотр и результат После загрузки показаны первые 20; обработаются все файлы.

Ожидают обработки0 шт.

Выберите изображения для просмотра миниатюр.

Результат обработки0 шт.

Миниатюры результатов появятся после обработки.

Инструкции

Инструкция по использованию

Создайте контур обрезки: после входа в инструмент на шаге «Создание контура» выберите тип фигуры: многоугольник, круг, эллипс или вложенный прямоугольник.
Выберите готовую фигуру: можно выбрать пресет из базовых фигур, стрелок и значков или декоративных фигур, а затем при необходимости настроить параметры.
Отредактируйте параметры контура: для многоугольника можно перетаскивать контрольные точки или вводить процентные координаты в текстовое поле; для круга, эллипса и вложенного прямоугольника можно напрямую указать радиус, центральную точку, отступы и скругление углов.
Настройте предпросмотр: можно изменить ширину и высоту предпросмотра, цвета градиента, угол градиента, а также выбрать изображение в качестве содержимого предпросмотра.
Скопируйте CSS-код: после проверки результата нажмите «Копировать clip-path» или «Копировать CSS»; можно выбрать, включать ли префикс -webkit и селектор класса.
Пакетно обработайте изображения: нажмите «Далее: пакетная обработка», выберите несколько изображений, задайте формат вывода, качество и режим размера, затем запустите обработку.
Скачайте результат: после завершения обработки нажмите «Скачать все результаты ZIP»; выходные файлы по возможности сохранят исходные имена, а при совпадении имен автоматически будут добавлены цифры для различения.

Частые вопросы

Ответ: clip-path используется для обрезки элемента по заданной форме и часто применяется для нестандартного отображения изображений, оформления краев карточек, формы кнопок, декоративной графики на страницах и интерактивных эффектов.

Ответ: polygon создает многоугольник по нескольким координатным точкам; circle создает круглую область обрезки; ellipse создает эллиптическую область обрезки; inset создает вложенный прямоугольник и поддерживает параметры скругления углов.

Ответ: координаты указываются в процентах, например 50% 0% означает середину верхнего края элемента, а 100% 100% — правый нижний угол. Точки разделяются запятыми, требуется минимум 3 точки.

Ответ: -webkit-clip-path используется для совместимости с некоторыми средами на базе WebKit. Чтобы расширить диапазон поддержки, можно одновременно оставить вариант с префиксом и стандартную запись.

Ответ: в качестве входных файлов можно выбрать распространенные форматы изображений, а вывод поддерживает PNG, JPEG и WebP. PNG подходит для сохранения прозрачных областей, JPEG — для создания файлов меньшего размера, WebP — для баланса между размером и качеством изображения.

Ответ: инструмент по возможности сохранит исходные имена файлов и заменит расширение в соответствии с форматом вывода. Если есть файлы с одинаковыми именами, к имени файла будет добавлено число, чтобы результаты не перезаписывали друг друга.