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

Выберите фигуру, переместите вершины и скопируйте готовый clip-path: polygon() для изображения или блока. Координаты в процентах сохраняют форму при изменении размера элемента.

Как пользоваться
  • Выберите основу на вкладке «Фигуры» галереи. Обрезанная часть элемента видна бледной подложкой, пунктир — границы элемента.
  • Перетаскивайте точки на холсте или выберите точку и двигайте её стрелками, с Shift — на 10%. Двойной щелчок по холсту добавляет точку после выбранной. Номер у каждой точки на холсте совпадает с кнопкой в разделе «Точки».
  • Несколько точек: щёлкните по точке с Ctrl (на Mac — Cmd) на холсте или по её номеру в разделе «Точки». Выбранные точки двигаются вместе — перетаскиванием любой из них, стрелками или крестовиной в режиме «Точки». Например, выберите две нижние вершины и опустите низ фигуры. Обычный щелчок снова выбирает одну точку. Delete или Backspace удаляет выбранные точки — в фигуре остаётся не меньше трёх. Ctrl+Z (на Mac — Cmd+Z) отменяет последнее изменение.
  • «Магнит» притягивает точку к сетке через 5% и к координатам других точек — так получаются ровные стороны и прямые углы. Удерживайте Shift при перетаскивании, чтобы временно отключить его.
  • Крестовина в режиме «Фигуру» сдвигает всю фигуру, кнопка в центре ставит её посередине, «−10%» и «+10%» меняют размер от центра фигуры.
  • «Своё изображение» показывает обрезку на вашем фото. Файл остаётся в браузере, а в CSS попадает его имя — путь к файлу на сайте укажите сами.
  • Включите «Анимировать» в группе «Точки», чтобы контур перетекал между кадрами. Ваша фигура станет кадром «Начало», «Конец» начнётся с её копии — измените его точками или фигурой из галереи. Перетащите кадр, чтобы поменять «Начало» и «Конец» местами. Готовые варианты — на вкладке «Анимация» галереи.
  • «Поделиться» копирует ссылку с настройками; загруженное изображение в неё не входит.
Как читать CSS clip-path

Точки polygon() соединяются по порядку, последняя — с первой. X отсчитывается от левого края, Y — от верхнего. Обрезка скрывает содержимое за контуром, но не меняет место элемента в раскладке. Пересекающиеся рёбра могут образовывать отверстия.

Для анимации в кадрах должно быть одинаковое число точек — генератор следит за этим сам. Экспорт отключает анимацию при настройке уменьшенного движения. Размеры элемента задайте отдельно.

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

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

Фон предпросмотра
Пропорции элемента

Пунктир — границы элемента, бледная подложка — обрезанная часть. Перетаскивайте точки или выберите точку и двигайте её стрелками (Shift — шаг 10%). Магнит притягивает точку к сетке через 5% и к координатам других точек; Shift при перетаскивании временно отключает его. Двойной щелчок по холсту добавляет точку после выбранной.

PNG, JPEG, WebP, AVIF или GIF до 10 МБ. Файл остаётся в браузере (не загружается на сервер) и не входит в ссылку.
Файл не выбран

Настройка точек

Сдвиг и масштаб

Стрелки сдвигают фигуру целиком или выбранные точки на 1% (с Shift — на 10%). Центрирование и масштаб применяются ко всей фигуре редактируемого кадра.

Двигать
Точки

Щелчок выбирает точку, Ctrl (Cmd) + щелчок — несколько: их двигают вместе перетаскиванием, стрелками или крестовиной в режиме «Точки». Delete удаляет выбранные точки, Ctrl+Z (Cmd+Z) отменяет последнее изменение. Поля X и Y — для последней выбранной. Номера на холсте совпадают с кнопками. От 3 до 32 точек; добавление и удаление меняются в обоих кадрах.

Готовый CSS

Включите JavaScript для редактирования. Пример ниже обрезает элемент в форме ромба.

Обрезка элемента

.shape {
  background: linear-gradient(90deg, #0b7a75, #2fa84f);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Для других эффектов попробуйте генератор трансформаций и генератор анимаций.