CSSБесплатно

CSS Clip-Path Generator

Q: Какие фигуры поддерживает clip-path?

Четыре базовые функции: circle() — круг, ellipse() — эллипс, inset() — прямоугольник с отступами и скруглением, polygon() — произвольный многоугольник. Также поддерживается path() для SVG-путей и url() для ссылки на SVG clipPath.

Визуальный генератор CSS clip-path с интерактивным редактором форм

ПревьюКлик — добавить точку, ПКМ — удалить

Фоновое изображение

Параметры

Точек: 3. Перетаскивайте точки на превью. Кликните на пустое место, чтобы добавить точку. Правый клик по точке — удалить.

CSS код

Свойство clip-pathCSS

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Пресеты

О сервисе CSS Clip-Path Generator

CSS Clip-Path Generator — интерактивный редактор для создания обтравочных масок. Выберите режим (polygon, circle, ellipse, inset), настройте точки визуально или выберите готовый пресет — получите CSS clip-path для копирования.

Режимы polygon, circle, ellipse, inset

Визуальное перетаскивание контрольных точек

Библиотека готовых пресетов (стрелки, звёзды, волны)

Мгновенный предпросмотр формы

Экспорт clip-path и -webkit-clip-path

Поддержка процентных и пиксельных значений

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

Что такое clip-path и зачем он нужен?

clip-path задаёт видимую область элемента, обрезая всё за пределами фигуры. Позволяет создавать нестандартные формы без PNG-масок: скошенные секции, круговые аватарки, декоративные блоки. Работает с любым HTML-элементом и изображениями.

Какие фигуры поддерживает clip-path?

Как анимировать clip-path?

clip-path анимируется через transition и @keyframes, если начальная и конечная формы используют одну функцию с одинаковым числом точек. Например, polygon с 4 точками можно плавно трансформировать в другой polygon с 4 точками. Для сложных переходов используйте GSAP или Web Animations API.

Влияет ли clip-path на доступность и клики?

clip-path скрывает пиксели визуально, но элемент сохраняет свои размеры в потоке документа. Клики за пределами обрезки по умолчанию всё ещё срабатывают. Добавьте pointer-events: none к обрезанным областям, если нужно ограничить интерактивность.

Какова браузерная поддержка clip-path?

Базовые фигуры (circle, ellipse, inset, polygon) поддерживаются во всех современных браузерах. Для Safari и старых версий Chrome добавляйте -webkit-clip-path. Функция path() имеет ограниченную поддержку — проверяйте Can I Use для вашей целевой аудитории.

Полезные статьи

Руководства и советы по теме

Все статьи

CSS clip-path

Читать статью

Загрузка...

Обратная связь

Нашли ошибку в reChecker? Опишите, что произошло, и укажите адрес страницы. Оставьте email или телефон — ответим после проверки.

Нужна помощь с вашим сайтом или SEO? Отправьте отдельную заявку на поддержку.

CSS Clip-Path Generator

ПревьюКлик — добавить точку, ПКМ — удалить

Параметры

CSS код

Пресеты

О сервисе CSS Clip-Path Generator

Что такое clip-path и зачем он нужен?

Какие фигуры поддерживает clip-path?

Как анимировать clip-path?

Влияет ли clip-path на доступность и клики?

Какова браузерная поддержка clip-path?

CSS clip-path

Box Shadow

Gradient Generator

Glassmorphism

Обратная связь

CSS Clip-Path Generator

ПревьюКлик — добавить точку, ПКМ — удалить

Параметры

CSS код

Пресеты

О сервисе CSS Clip-Path Generator

Что такое clip-path и зачем он нужен?

Какие фигуры поддерживает clip-path?

Как анимировать clip-path?

Влияет ли clip-path на доступность и клики?

Какова браузерная поддержка clip-path?

CSS clip-path

Box Shadow

Gradient Generator

Glassmorphism