/* Keyword values */
clip-path: none;

/* <clip-source> values */ 
clip-path: url(imag.png);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

:fellow: Вот как это работает:

 

Плюсы

• Браузеры, которые не поддерживают свойство clip-path, будут его игнорировать. Если вы используете свойство осторожно, пользователи с неподдерживаемыми браузерами ничего не заподозрят!
• После создания обтравочного контура спецификация заявляет, что события указателя не должны отправляться за пределы области отсечения (что идеально). Таким образом, события щелчка ограничены фигурой и её внешней границей.
• Вы можете использовать проценты или любую единицу длины, например пиксели или em, для определения координат базовых фигур с помощью CSS. Гибкие единицы, такие как проценты, могут использоваться для создания отзывчивых фигур, идеально подходящих для адаптивных макетов.

Програмы для генирации фигур "clip-path"

- https://bennettfeely.com/clippy/

- http://www.cssplant.com/clip-path-generator

Самый яркий пример - это создание треугольника, не обичным методом, а через clip-path:

Пример №1 - треугольника:

img { clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

Пример того что можно сделать: