Реклама мешает? Идти Без рекламы Сегодня 

Генератор CSS Clip-Path

ЦветРазработчик

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

Тип фигуры

Форма

Предустановки

Предустановленный

Настройки круга

Радиус %: 50

Центр X %: 50

Центр Y %: 50

Настройки эллипса

Радиус X %: 50

Радиус Y %: 40

Центр X %: 50

Центр Y %: 50

Настройки внутреннего отступа

Верх %: 10

Право %: 10

Низ %: 10

Лево %: 10

Радиус скругления %: 0

Параметры

Привязка к сетке (шаг 5%)

Показать сетку

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

Генератор CSS Clip-Path

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

Как использовать

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

Функции

Визуальный редактор drag-and-drop – Создавайте фигуры, перемещая контрольные точки непосредственно на холсте
Несколько типов фигур – Многоугольник, круг, эллипс и внутренний отступ
Предустановленные шаблоны – Начните с распространенных фигур, таких как треугольники, звезды, стрелки и т. д.
Отмена и повтор – Полная история для неразрушающего редактирования
Привязка к сетке – Точное размещение точек с настраиваемой привязкой к сетке
Экспорт в SVG – Загрузите свою фигуру в виде файла SVG
Вывод CSS в реальном времени – Мгновенно скопируйте сгенерированное свойство clip-path

РЕКЛАМА · УДАЛЯТЬ?

 Часто задаваемые вопросы

Что такое CSS clip-path и как он работает?

CSS clip-path определяет область отсечения, которая определяет, какие части элемента видны. Все, что находится за пределами фигуры clip-path, скрыто. Он поддерживает основные фигуры (круг, эллипс, внутренний отступ, многоугольник) и определения путей SVG. В отличие от overflow:hidden, который обрезает только по прямоугольным границам, clip-path может создавать сложные непрямоугольные видимые области для креативных макетов и визуальных эффектов.
Какая разница между clip-path и mask в CSS?

Clip-path создает четкую границу — пиксели либо полностью видны, либо полностью скрыты в зависимости от того, попадают ли они внутрь определенной фигуры. CSS mask использует изображение или градиент для управления прозрачностью, позволяя создавать мягкие края и частичную прозрачность. Clip-path проще и производительнее для геометрических фигур, тогда как маски предлагают больший художественный контроль с помощью градиентов и альфа-каналов.
Как работают координаты CSS-многоугольника?

Координаты многоугольника в clip-path используют процентные значения или значения длины относительно ограничивающей рамки элемента. Каждая точка определяется как пара x,y, где 0% 0% — это верхний левый угол, а 100% 100% — нижний правый. Точки соединяются по порядку, образуя фигуру. Например, polygon(50% 0%, 100% 100%, 0% 100%) создает треугольник. Фигура автоматически замыкается путем соединения последней точки с первой.