CSS clip-path

1) Basic Shapes: inset(), circle(), ellipse()

.inset   { clip-path: inset(12% 10% 12% 10% round 12px); }
.circle  { clip-path: circle(46% at 50% 50%); }
.ellipse { clip-path: ellipse(60% 40% at 50% 50%); }

2) Polygons: Triangles & Hexagons

.triangle { clip-path: polygon(50% 8%, 6% 92%, 94% 92%); }
.hexagon  { clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%); }

Coordinates are percentages (x y). Start at the first vertex and go around the shape.

3) Shape Morphing on Hover

.blob {
  clip-path: polygon(56% 9%, 82% 18%, 91% 41%, 83% 67%, 59% 86%, 34% 91%, 13% 77%, 9% 52%, 18% 27%, 35% 13%);
  transition: clip-path .45s cubic-bezier(.2,.7,.2,1);
}
.blob:hover{
  clip-path: polygon(58% 7%, 80% 18%, 92% 42%, 84% 69%, 59% 89%, 32% 90%, 12% 76%, 9% 49%, 19% 25%, 37% 10%);
}

To animate clip-path, keep the same number of polygon points in both states.

4) Diagonal Section (Hero Slice)

.slice{
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 88%);
}

Great for angled sections without extra SVGs. Adjust the two bottom points for steeper angles.

5) Reveal Mask on Hover

.reveal::after{
  clip-path: circle(0% at 0% 0%);
  transition: clip-path .45s ease-out;
}
.reveal:hover::after{
  clip-path: circle(140% at 100% 100%);
}