Cвойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой.
Обрезанная область – это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).
Существует два способа использования clip-path:
1. На CSS – доступны разные фигуры: polygon, circle, ellipse и inset; inset предназначен для прямоугольников.
Преимущества CSS:
1) Легкий синтаксис,
2) Можно использовать относительные единицы.
2. На SVG – в качестве альтернативы можно создать фигуру с помощью SVG, а затем обрезать элемент по этой фигуре с помощью синтаксиса.
Преимущества SVG:
1) Поддержка браузерами лучше.
2) Вы можете сделать обрезку сложными фигурами.