Что это такое
Это визуальный инструмент для создания CSS-фигур через свойство clip-path. Вместо того чтобы вручную высчитывать координаты точек для полигона, вы просто расставляете маркеры мышкой на холсте и сразу видите результат. Генератор поддерживает базовые формы — круг, эллипс, прямоугольник с внутренним отступом — и двенадцать готовых пресетов. На выходе получаете готовый CSS-код, который можно скопировать в свой проект.
Как пользоваться
- Выберите тип фигуры — в панели инструментов переключитесь между
polygon,circle,ellipseилиinset. Для начала проще взять полигон. - Добавьте точки — кликните в любом месте рабочей области, чтобы поставить вершину будущей фигуры. Точки можно перетаскивать мышкой (drag & drop).
- Отредактируйте форму — тяните маркеры за их цветные ручки, чтобы изогнуть границы или добавить скругления. Если нужно убрать лишнюю точку, кликните по ней правой кнопкой мыши.
- Используйте пресеты — если нужна готовая фигура вроде звезды, стрелки или облака, выберите её в списке пресетов и подгоните под свои размеры.
- Скопируйте код — в правой панели автоматически обновляется CSS-свойство
clip-path. Нажмите кнопку копирования, чтобы перенести его в буфер обмена. - Экспортируйте в SVG — если вам нужен векторный путь, переключите формат вывода и сохраните результат.
Кому и когда пригодится
Инструмент полезен верстальщикам, которые хотят сделать нестандартные блоки на сайте без использования картинок: диагональные секции, вырезанные углы у кнопок, необычные рамки для фото. Дизайнерам он помогает быстро проверить, как будет выглядеть макет с обрезкой изображения. Также генератор выручает при создании CSS-анимаций — например, плавного появления элемента с изменением формы полигона. Если вы работаете с SVG-иконками и хотите переиспользовать их как CSS-фигуры, тут тоже можно быстро получить нужный код.
Плюсы и ограничения
Плюсы:
- Визуальный подход — не нужно считать координаты в уме.
- Мгновенная обратная связь: все изменения видны сразу.
- Поддержка разных типов обрезки: полигон, круг, эллипс, inset.
- Готовые пресеты экономят время на типовых фигурах.
- Экспорт в CSS и SVG покрывает большинство задач.
Ограничения:
- Сложные фигуры с большим количеством точек требуют терпения — точность ручной расстановки ограничена.
- Свойство
clip-pathне работает в старых браузерах (IE и ранние версии Edge). - Обрезка не влияет на кликабельность элементов — событийная область остаётся прямоугольной.
Частые вопросы
Можно ли использовать clip-path для анимации?
Да, свойство анимируется, если задать переходы на clip-path в CSS. Однако для полигонов количество точек должно совпадать в начальном и конечном состоянии, иначе анимация будет скачкообразной. Круги и эллипсы анимируются проще.
Почему фигура не отображается в моём браузере?
Проверьте, что вы используете современный браузер (Chrome, Firefox, Safari, Edge). Также убедитесь, что в CSS нет синтаксических ошибок — например, лишних пробелов или пропущенных запятых в координатах. Инструмент выдаёт корректный код, поэтому обычно проблема в кэше или префиксах.
Чем отличается polygon от inset?
polygon задаёт произвольный многоугольник с любым числом вершин, а inset — прямоугольник с равномерными отступами от краёв элемента. Inset удобен для создания скруглённых углов или рамок, тогда как polygon даёт полную свободу формы.
Можно ли использовать clip-path вместе с изображениями?
Да, свойство работает с любым элементом, включая <img>, <video> и фоновые картинки. Обрезка применяется к видимой области, при этом сам файл не изменяется — это чисто CSS-эффект.
Как переиспользовать сгенерированную фигуру в другом месте?
Просто скопируйте CSS-код в нужный класс или инлайн-стиль. Если вы экспортировали SVG-путь, его можно вставить как значение clip-path: url(#id) или использовать в качестве маски. В большинстве случаев достаточно обычного копирования.