Генератор CSS clip-path

Создавайте формы CSS clip-path: многоугольники с перетаскиваемыми точками и пресетами, круг, эллипс и inset со скруглением. Предпросмотр и код.

Форма

Пресеты

Настройки формы

Перетаскивайте маркеры в предпросмотре или вводите точные значения.

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

Предпросмотр

CSS-код

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

Что такое Генератор clip-path?

Визуально рисует формы clip-path. Многоугольники редактируются перетаскиванием точек в предпросмотре или вводом точных процентов, есть пресеты от треугольников до звёзд и выносок; круг, эллипс и inset настраиваются ползунками.

Как пользоваться Генератор clip-path

Выберите форму: Polygon, Circle, Ellipse или Inset.
Для многоугольника выберите пресет, затем перетаскивайте маркеры или вводите проценты X/Y каждой точки; используйте добавление и удаление точек.
Для круга и эллипса задайте радиус и центр; для inset задайте отступы сверху, справа, снизу, слева и при желании радиус скругления.
Включите показ отсечённой области, чтобы увидеть, что обрезается.
Скопируйте CSS-код.

Пример

Ввод

Hexagon preset with point 1 moved to X 20%

Вывод

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

Пресет шестиугольника, у которого первая точка сдвинута по X до 20%.

Когда использовать Генератор clip-path

Используйте clip-path для декоративных форм изображений, скошенных краёв секций, шестиугольных аватаров и анимаций появления (clip-path анимируется между формами с одинаковым числом точек). Содержимое за пределами формы скрыто и не получает кликов. Для скруглённых прямоугольников лучше border-radius; для форм, которые должен обтекать текст, используйте shape-outside.

Как работает Генератор clip-path

Координаты это проценты от рамки элемента, отсчитываемые от верхнего левого угла. Многоугольники записываются как polygon(x% y%, …) в порядке точек, круги как circle(r% at x% y%), эллипсы как ellipse(rx% ry% at x% y%), а inset как inset(top right bottom left round r) с четырьмя отступами, сокращёнными как в margin. Добавление точки вставляет новую точку посередине между выбранной и следующей.