How to use CSS clip-path for shaped layouts

· Category: HTML & CSS

Short answer

clip-path hides portions of an element, revealing only a defined shape such as a circle, ellipse, polygon, or SVG path.

Steps

  1. Choose a shape function like circle(), ellipse(), polygon(), or inset().
  2. Apply it as clip-path: polygon(...) in CSS.
  3. Use percentage values for responsive shapes.

Example

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.avatar {
  clip-path: circle(50% at 50% 50%);
}

Tips

  • Animating clip-path is performant if the number of points stays consistent.
  • Use clip-path generators online to create complex polygons visually.
  • Fallback gracefully for older browsers that lack support.