clip-path clips an element to a shape. circle(50%) makes a circle, polygon() any polygon shape. Animate clip-path for reveal effects. Use online Clippy tools to generate complex polygon values visually.
clip-path
/* Circle */
.avatar { clip-path: circle(50%); }
/* Polygon shapes */
.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.diagonal { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
/* Animated clip-path */
.reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.5s ease;
}
.reveal.visible {
clip-path: inset(0 0% 0 0);
}