Генератор Clip Path
Обрезайте элементы в стрелки, звёзды, шестиугольники или собственные полигоны — перетаскивайте точки на холсте и копируйте код clip-path.
Перетаскивайте точки для изменения формы · двойной клик по холсту добавляет точку
Как использовать генератор Clip Path
- Выберите пресет формы или начните перетаскивать точки пятиугольника по умолчанию.
- Дважды кликните в любом месте холста, чтобы вставить новую точку на ближайшее ребро.
- Выберите точку и нажмите «Удалить точку», чтобы убрать её (минимум 3 точки).
- Переключитесь в режим круга, эллипса или inset для параметрических форм со скруглёнными углами.
- Скопируйте объявление clip-path — проценты сохраняют форму адаптивной при любом размере.
Об этом генераторе Clip Path
CSS-свойство clip-path обрезает элемент по базовой форме — полигон, круг, эллипс или inset — скрывая всё снаружи неё. Это стандартный способ создания непрямоугольных макетов: наклонные разделители секций, шестиугольные сетки изображений, стрелки, речевые пузыри и звёздные рейтинги — всё без изображений или SVG.
Этот редактор позволяет проектировать формы визуально: перетаскивайте вершины полигона на холсте, дважды кликайте для добавления точек или начните с 15 вручную настроенных пресетов. Все координаты в процентах, поэтому ваши формы масштабируются вместе с элементом. Вывод включает префикс -webkit-clip-path для старых версий Safari и Tailwind-класс с произвольным значением для utility-first проектов.
FAQ по Clip Path
Как добавить или удалить точки полигона?
Дважды кликните в любом месте холста — новая точка вставится на ближайшее ребро в этом месте. Чтобы удалить точку, кликните по ней для выбора (она станет красной) и нажмите «Удалить точку». Полигон всегда сохраняет минимум 3 точки.
Какую систему координат использует clip-path polygon?
Каждая точка — пара x/y, измеренная от верхнего левого угла элемента. Этот генератор использует проценты, так что 0% 0% — верхний левый угол, а 100% 100% — нижний правый. Процентные координаты автоматически масштабируются с элементом, сохраняя вашу форму адаптивной.
Можно ли анимировать clip-path?
Да — clip-path анимируется в CSS, пока начальная и конечная формы одного типа с одинаковым количеством точек (для полигонов). Спроектируйте два состояния здесь, сохраните одинаковое количество точек и переходите между ними с transition: clip-path .3s.
Влияет ли clip-path на дочерние элементы и переполнение?
clip-path обрезает весь элемент, включая детей, рамки и даже box-shadow — всё вне формы скрыто и некликабельно. Если нужна тень вокруг обрезанной формы, примените drop-shadow() как фильтр к родительскому элементу.
В чём разница между clip-path и SVG clipPath?
Базовые формы clip-path CSS (полигон, круг, эллипс, inset) покрывают большинство потребностей макета одной строкой кода и анимируются. SVG clipPath поддерживает сложные пути с кривыми — используйте CSS-формы для геометрических дизайнов (этот инструмент), а SVG когда нужны кривые Безье.