01
Проверьте замену шаблона
Звезда или стрелка сначала показывает, сколько существующих вершин заменится. Только после подтверждения форма меняется; одно отменённое действие вернёт прежнюю.
Инструменты HTML и CSS
Генератор clip-path CSSдвигайте точки и копируйте код
Перемещайте вершины или меняйте параметры базовой фигуры и проверяйте полученное CSS-правило.
Генератор clip-path CSS
Предпросмотр фигуры
Результат CSS
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Координаты и CSS создаются только в вашем браузере.
CSS готов к копированию.
Если нужен шестиугольный значок или скошенный край изображения, трудно подобрать polygon-координаты по одному тексту. Генератор clip-path CSS показывает границу при перемещении вершины.
Генератор clip-path CSS также настраивает круг, эллипс и inset отдельными полями. Старый код нельзя экспортировать после изменения фигуры, пока новый результат не будет готов.
Зачем нужен Генератор clip-path CSS
Граница обрезки и координаты видны одновременно.
Тяните вершину и смотрите результат
Граница многоугольника меняется вместе с точкой. Точные X/Y вводятся отдельно, поэтому редактор clip-path polygon помогает довести форму без постоянной правки таблицы стилей.
Меняйте единицы без сдвига
Одна фигура выводится в процентах либо в пикселях для области 320 × 320 px. Так можно создать clip-path онлайн и понять, какой вариант подходит размеру элемента.
От шаблона к точной CSS-форме
02
Уточните вершины
Нажмите метку на ребре, чтобы вставить точку посередине. Выбранную точку можно настроить числами; проценты масштабируются, пиксели рассчитаны для 320 px.
03
Выводите актуальный код
Автоматический режим ждёт короткую паузу. При выключении используйте кнопку или Ctrl/Cmd + Enter. Копирование старого результата блокируется.
Управление фигурами и выводом
Четыре базовые формы
polygon, circle, ellipse и inset имеют собственные поля для вершин, радиусов, центра, отступов и скругления.
Редактирование вершин
Добавляйте точку на ребре, перетаскивайте и вводите координаты. Удаление подтверждается, а минимум три вершины сохраняется.
Шаблоны с отменой
Треугольник, ромб, шестиугольник, звезда и стрелка дают стартовую форму без случайной потери ваших правок.
Готовое CSS-правило
Этот генератор CSS фигур выдаёт стандартное объявление clip-path для копирования или скачивания.
Границы формы и размеров
- Пиксели привязаны к 320 px
- Вывод px рассчитан для области 320 × 320 px. Если нужна адаптивная обрезка многоугольника CSS, используйте проценты; смешивать единицы в одном полигоне нельзя.
- Нет загрузки произвольного CSS
- Существующие path(), shape(), calc() и SVG-ссылки не преобразуются в управляющие точки. Панель кода показывает только результат генерации.
- Размер вёрстки не меняется
- clip-path скрывает часть рисунка, но элемент сохраняет место в потоке. Собственная тень box-shadow тоже может быть обрезана.
- Нет файлов изображений и анимации
- Инструмент не загружает фото, не создаёт PNG/SVG и hover-переходы. Для анимации полигонов обе фигуры должны иметь одинаковое число вершин.
Вопросы про Генератор clip-path CSS
Влияет ли clip-path на размер элемента в вёрстке?
Нет. clip-path меняет видимую область, но не пересчитывает исходную коробку элемента и занимаемое место.
Почему box-shadow обрезается вместе с фигурой?
Тень рисуется самим элементом и обрезается вместе с ним. Если нужна видимая тень, назначьте её внешней обёртке.
Можно ли анимировать переход между двумя многоугольниками?
CSS может плавно переходить между совместимыми многоугольниками с одинаковым числом вершин. Здесь создаётся только одна статическая форма.
Как сделать многоугольную форму адаптивной?
Выбирайте проценты: координаты будут следовать за размером элемента. Пиксели привязаны к указанной области 320 × 320 px.
Можно ли экспортировать фигуру как SVG?
Нет, экспортируется только стандартное CSS-объявление. Если нужен SVG, используйте отдельный инструмент для работы с векторными путями.
Нашли ошибку в фигуре или координатах?
Откройте Генератор clip-path CSS
Выберите шаблон, сдвиньте вершины и сравните видимую границу с полученным кодом.
Генератор clip-path CSS пригодится для следующей нестандартной геометрической обрезки.
Вычисления в браузере.