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

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

Свойство clip-path позволяет вырезать из элемента почти любую фигуру только средствами CSS. Шестиугольные аватары, скошенные края разделов, кнопки в форме стрелок и облачка диалогов можно создать без изображений и дополнительной разметки. Однако вписывать координаты полигона вручную — занятие утомительное. Этот генератор даёт живой предпросмотр с перетаскиваемыми маркерами, так что вы можете сформировать элемент и скопировать готовую декларацию.

Полигоны, круги, эллипсы и inset

Инструмент поддерживает основные функции базовых фигур. polygon() принимает список точек, записанных как проценты x и y, что идеально подходит для треугольников, трапеций, звёзд и стрелок. circle() и ellipse() принимают радиус и положение центра, а inset() обрезает элемент внутрь от каждого края блока с необязательным радиусом скругления углов. Выберите пресет в качестве отправной точки и доработайте его. Для полигонов перетаскивайте любой маркер, чтобы переместить вершину, или наведите на маркер фокус и используйте клавиши со стрелками для точных шагов в один процент, удерживая Shift для более крупных прыжков.

Советы по использованию clip-path

Поскольку все значения заданы в процентах, фигура масштабируется вместе с элементом, что делает её отлично подходящей для адаптивных макетов. Помните, что clip-path влияет только на отрисовку: рамки и тени box-shadow за пределами фигуры тоже обрезаются, поэтому используйте элемент-обёртку с filter: drop-shadow(), если нужна тень, повторяющая фигуру. Также можно анимировать переход между двумя полигонами с одинаковым количеством точек с помощью CSS-переходов для плавных эффектов морфинга. Сгенерированный код — это одна строка, которую можно вставить в любую таблицу стилей, а всё редактирование происходит локально в вашем браузере.