Shape Type

Polygon Presets

Click on preview area to add points. Drag points to move. Double-click to remove.

Preview Options

Points (3)

1
2
3
1
2
3

Generated CSS

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Clip Path Value

polygon(50% 0%, 100% 100%, 0% 100%)

About CSS clip-path

The clip-path CSS property creates a clipping region that defines what part of an element should be shown. Parts outside the region are hidden.

Shape Functions:

  • polygon() - Define a shape with multiple points
  • circle() - Create a circular clipping region
  • ellipse() - Create an elliptical clipping region
  • inset() - Define inset rectangle with optional rounded corners

Browser Support

clip-path is supported in all modern browsers. Use the-webkit-clip-path prefix for better Safari support. Note that transitions and animations work best with shapes that have the same number of points.

Tips:

  • Use percentages for responsive shapes
  • Polygon points are defined clockwise from top-left
  • Combine with transitions for hover effects
  • Clipped content is still accessible to screen readers

Need Custom Web Design?

Brix340 creates stunning, modern websites with unique visual effects and creative CSS techniques that make your brand stand out.

Get a Free Consultation