Drag the purple dots to reshape. Double-click on edge to add a point.
Presets
▲ Triangle
■ Square
⬠ Pentagon
⬡ Hexagon
★ Star
♥ Heart
➔ Arrow
✚ Cross
⬢ Trapezoid
CSS code
About clip-path
clip-pathcuts an element to a custom shape — anything outside the path becomes invisible- The
polygon()function takes points asx% y%pairs, defining the visible region - Supported on all modern browsers; for IE11, use SVG
<clipPath>instead - Other shape functions:
circle(r at cx cy),ellipse(rx ry at cx cy),inset(top right bottom left)
Use cases
- Diagonal section dividers on landing pages
- Custom-shaped image masks (hexagonal avatars, etc.)
- Animated reveal effects with transitions
- Decorative shapes without extra images