CSS-свойство clip-path создает видимую область части элемента. То есть, все, что находится внутри такой области (clipping region), будет видно, а все, что находится вне этой области, будет скрыто.

В этом небольшом обзоре, с помощью функции polygon мы создадим многоугольник, вершины которого имеют определенные координаты:

.clipped-element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Итак, с помощью функции polygon в примере, приведенном выше, определены три вершины многоугольника, при этом в каждой паре первая координата соответствует оси X, вторая - оси Y. Начало координат (0%,0%) находится в левом верхнем углу элемента. Все, что находится внутри многоугольника и есть ограниченная видимая область (clipping region).

А теперь самое интересное: свойство clip-path поддерживает transition

Поэтому можно использовать различные CSS-селекторы, в том числе :hover, и менять координаты. Таким образом мы можем менять форму видимой области и создавать крутые динамические эффекты.

Вот пример одного из них на codepen. Чтобы увидеть анимацию наведите курсор на прямоугольник:

Спасибо за внимание.

Перевод статьи Sebastiano Guerriero “Animated Illustrations with clip-path”.