CSS clip path animated edge

Описание: Clip the image's bottom edge into a triangle. Animate that change.

These videos form a lecture series set up in sequence so you can easily learn web development skills.
image attribution:
Roberto Sotelo
on unsplash.com


image
clip-path
polygon 0% 0%,
100% 0%, 100% 100%,
50% 100%, 0% 100%;
animation
polygons 5s
infinite
height: 300px;
width: 300px;

keyframes polygons
from
clip-path:
polygon 0% 0%,
100% 0%, 100% 100%,
30% 100%, 0% 100%;

to
clip-path:
polygon 0% 0%,
100% 0%, 100% 80%,
30% 100%, 0% 80% ;