CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента останется видимой. Те части, которые находятся внутри области, будут видны, а части вне области – скрыты. Обрезанная область – это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG, либо как фигура, например, круг (circle()).
Возможные значения свойства clip-path
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Clippy — CSS clip-path maker >>>
Поддержка свойства clip-path
в браузерах на Can I Use.