Для разработчиков / Фигуры CSS

Генератор CSS clip-path: полигон, круг, эллипс и inset

Создавайте CSS-вырезы с шестью пресетами полигонов, перемещаемыми и настраиваемыми с клавиатуры точками, а также с помощью элементов управления для круга, эллипса и inset. Просматривайте градиент или локальное изображение и копируйте CSS в процентах или пикселях.

Генератор CSS clip-path: полигон, круг, эллипс и inset: Обрезает область предварительного просмотра по выбранной фигуре, не изменяя исходный файл изображения. Результат в процентах зависит от размеров элемента. Результат в пикселях использует исходные ширину и высоту; отображаемая область предварительного просмотра масштабируется под размер экрана. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Стенд форм клиппинг-контуровЛокальная обработка

Полностью работает в браузере

Перетащите пронумерованную точку, используйте клавиши со стрелками или введите координаты. Координаты ниже указаны в процентах; при выводе в пикселях используется исходный размер.

Точка 1
Точка 2
Точка 3
Точка 4
Точка 5
Точка 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Фигуры в процентах изменяют размер вместе с элементом. Для процентов круга используется нормализованная диагональ, для эллипса — ширина и высота. Координаты в пикселях привязаны к исходным размерам.

Обрезка в CSS

clip-path в MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Обрезка изменяет видимую область, но не меняет блок разметки элемента.

Координаты базовых фигур

W3C CSS Shapes Level 1, базовые фигуры: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Координаты многоугольника и радиусы эллипса вычисляются относительно reference box; проценты для круга используют его нормализованную диагональ. Координаты пресетов и градиент — оригинальная графика.

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

  1. Выберите фигуру и пресет, затем задайте исходные размеры.
  2. Перетаскивайте точки полигона, используйте клавиши со стрелками или редактируйте координаты; для других фигур настройте соответствующие параметры.
  3. Выберите вывод в процентах или пикселях и скопируйте CSS.

Конфиденциальность и ограничения

Необязательные изображения для предварительного просмотра остаются на вашем устройстве. Ничего не загружается.

Похожие инструменты

CSS GridТень блокаФлексбокс

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

Как изменить точку без перетаскивания?

Установите фокус на её пронумерованный маркер и используйте клавиши со стрелками либо введите проценты X и Y в списке точек. В полигоне должно быть не менее трёх точек.

Экспортирует ли инструмент обрезанное изображение?

Нет. Инструмент экспортирует CSS для HTML-элемента. Локальное изображение используется только для предварительного просмотра.

Как измеряются проценты для круга?

CSS использует нормализованную диагональ, sqrt((width squared + height squared) / 2), в качестве опорного радиуса круга. Радиусы эллипса рассчитываются отдельно по ширине и высоте.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен