Генератор clip-path CSS
Выберите форму и перетащите точки в предпросмотре для настройки. Код clip-path в процентах работает для элемента любого размера.
Как пользоватьсяОбрезка по формам с clip-path
Доступно на: 
Генератор clip-path CSS: для чего нужен
Выберите одну из готовых форм (треугольник, ромб, шестиугольник, пятиугольник, звезда, стрелка, сообщение, срезанные углы, параллелограмм, круг или эллипс) и перетащите точки в предпросмотре для настройки. Координаты в процентах, поэтому обрезка работает для любого размера.
Проверьте на своём фото и скопируйте готовую строку clip-path.
Как пользоваться
- Выберите форму.
- Перетащите точки для настройки и проверьте на фото.
- Скопируйте clip-path и используйте в CSS.
Когда использовать
- Фото разной формы на сайтах.
- Разделы со скошенными углами.
- Значки, стрелки и выноски только на CSS.
Частые вопросы
Что такое clip-path?
Это свойство CSS, которое показывает только часть элемента внутри формы. Изображение в файле остаётся целым; скрывается только то, что вне формы.
Работает ли во всех браузерах?
Да. polygon(), circle() и ellipse() работают во всех актуальных браузерах, без префикса.
Можно ли анимировать?
Да, между двумя polygon() с одинаковым числом точек, используя transition или animation для clip-path. Точки плавно перемещаются из одной формы в другую.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.