06 · Clip-Path
Hover each shape to morph between clip-path values via CSS transition.
circle → square
circle(50%) → inset(0)
triangle → diamond
polygon(50% 0, 100% 100%, 0 100%)
hexagon → circle
polygon(6 points) → circle(50%)
arrow → chevron
polygon morph on hover
ellipse → rect
ellipse(40% 50%) → inset(0 10%)
notched → full
polygon with corner notch
Reveal on Hover
clip-path used as a reveal mask — expand from center on hover
Text Clip
clip-path polygon applied to a text container for a slanted crop
CSS CLIP
PATH MORPH