Генератор CSS clip-path
Начните с готовой формы или перемещайте точки многоугольника прямо на экране, чтобы создать собственную обрезку, и получите соответствующий CSS-код clip-path с предпросмотром в реальном времени. Всё происходит в вашем браузере, ничего не отправляется на сервер.
Перетаскивайте белые точки на предпросмотре, чтобы изменить форму, или добавляйте и удаляйте точки ниже.
Как это работает
CSS-свойство clip-path обрезает элемент по форме, заданной списком точек, выраженных в процентах от ширины и высоты элемента. Этот инструмент предлагает готовые популярные формы (треугольник, шестиугольник, лента, звезда...), а также позволяет перемещать каждую точку мышью или пальцем, чтобы нарисовать собственную обрезку.
Почему координаты заданы в процентах?
Проценты вместо пикселей делают обрезанную форму адаптивной: она автоматически подстраивается под реальный размер элемента, к которому применена, а фиксированные значения искажали бы обрезку на другом экране.
Работает ли clip-path на всех изображениях и видео?
Да, clip-path применяется к большинству HTML-элементов, включая изображения, видео, кнопки и контейнеры, во всех современных браузерах. Но оставьте в макете запас: содержимое за пределами обрезанной формы становится невидимым, но продолжает занимать своё исходное место.
100% локальная обработка: построение многоугольника и созданный код остаются целиком в вашем браузере.