CSS свойство clip-path

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 site

Clippy — CSS clip-path maker >>>

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