Генератор clip-path
Визуально создавайте сложные CSS clip-path.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Перетаскивайте точки, чтобы изменить форму
- Используйте пресеты для быстрых фигур
- Попробуйте режим «polygon» для произвольных форм
Рекомендуемые инструменты
Подборка полезных утилит
Вырезание своих фигур с помощью CSS clip-path
Обзор
Свойство CSS clip-path позволяет обрезать элемент в произвольную фигуру — треугольник, шестиугольник, стрелку, блоб или любой многоугольник — без редактирования изображений. Мощный способ добавить непрямоугольный дизайн без лишних файлов. Поскольку писать координаты вручную неудобно, этот генератор clip-path даёт перетаскивать точки визуально и копирует точный CSS — всё в браузере.
Как пользоваться (по шагам)
- 1
Выберите или нарисуйте фигуру
Начните с пресета (треугольник, шестиугольник, круг) или расставьте точки для своего многоугольника.
- 2
Перетаскивайте точки
Двигайте углы в живом предпросмотре, пока фигура не станет нужной.
- 3
Скопируйте CSS clip-path
Вставьте сгенерированное значение clip-path на элемент, чтобы обрезать его по этой фигуре.
Как это работает
Вы выбираете или рисуете фигуру, и инструмент задаёт её через clip-path — обычно polygon() из процентных координат или пресет вроде circle() либо ellipse(). Всё вне фигуры становится прозрачным, поэтому элемент виден только внутри контура. Вы перетаскиваете точки в живом предпросмотре, а инструмент пишет соответствующее значение clip-path для вставки на любой элемент.
Когда пригодится
Обрезать изображение или секцию в угловатую или геометрическую фигуру. Создать диагональный разделитель между секциями страницы. Сделать шестиугольный аватар или бейдж. Добавить стрелку или форму облачка к выноске. Оформить непрямоугольный hero или карточку. Понять, как координаты многоугольника отображаются в видимую фигуру.
Частые вопросы
Она обрезается — становится полностью прозрачной и неинтерактивной, так что клики проходят сквозь. Элемент виден и реагирует только внутри контура; лежащий в основе блок макета по-прежнему занимает своё исходное место.
Важные замечания
clip-path обрезает визуально, но блок элемента по-прежнему занимает весь прямоугольный размер в макете, что может вызвать наложения или неожиданные отступы. Кроме того, обрезанный контент скрыт, а не удалён — не полагайтесь на это, чтобы прятать чувствительную информацию.