How to Create Shapes Using clip-path in CSS

Use the clip-path CSS property to create shapes by defining a clipping region that hides parts of an element. You can specify shapes like circle(), ellipse(), polygon(), or use inset() to clip the element into various shapes.

Syntax

The clip-path property defines a visible area of an element by clipping away parts outside the shape. You can use predefined shapes or custom polygons.

• circle(radius at center): Creates a circular clipping area.
• ellipse(rx ry at center): Creates an elliptical clipping area.
• polygon(x1 y1, x2 y2, ...): Creates a custom polygon shape by specifying points.
• inset(top right bottom left): Clips a rectangle inset from the edges.

css

clip-path: circle(50% at 50% 50%);
clip-path: ellipse(40% 60% at 50% 50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: inset(10% 20% 10% 20%);

Example

This example shows a square div clipped into a triangle shape using clip-path: polygon(). The clipped shape hides everything outside the triangle.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #4a90e2;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  /* Triangle shape */
}

Output

A blue triangle shape centered on a light gray background.

Common Pitfalls

Common mistakes when using clip-path include:

• Using incorrect units or percentages that cause unexpected clipping.
• Not specifying the at position for circle or ellipse, leading to clipping off-center.
• Forgetting browser support prefixes or fallback for unsupported browsers.
• Using complex polygons with too many points can be hard to manage.

Always test your shapes on different screen sizes and browsers.

css

/* Wrong: circle without center position (may clip oddly) */
.box-wrong {
  clip-path: circle(50%);
}

/* Right: circle with center position */
.box-right {
  clip-path: circle(50% at 50% 50%);
}

Quick Reference

clip-path Shape	Description	Example Syntax
circle	Circular clipping area	circle(50% at 50% 50%)
ellipse	Elliptical clipping area	ellipse(40% 60% at 50% 50%)
polygon	Custom polygon shape	polygon(50% 0%, 100% 100%, 0% 100%)
inset	Inset rectangle clipping	inset(10% 20% 10% 20%)

Key Takeaways

Use clip-path to create visible shapes by clipping parts of an element.

Common shapes include circle, ellipse, polygon, and inset with customizable parameters.

Always specify the center position for circle and ellipse shapes to avoid unexpected clipping.

Test shapes across browsers and screen sizes for consistent appearance.

Use polygon for custom shapes by defining points as percentages.