How does polygon() work in CSS clip-path?

polygon() takes a list of x y coordinate pairs as percentages relative to the element's bounding box. For example: clip-path: polygon(50% 0%, 100% 100%, 0% 100%) creates a downward-pointing triangle. Coordinates go clockwise to define the visible region.

Does CSS clip-path affect document layout?

No. clip-path only affects visibility — the clipped element still occupies its original space in the document flow. Other elements do not reflow around the clipped shape. To make content flow around shapes, use shape-outside on floated elements instead.

CSS Clip Path Generator

Q: What is the CSS clip-path property?

clip-path creates a clipping region that determines which part of an element is visible. Anything outside the clip path is hidden. It supports circle(), ellipse(), polygon(), inset(), and path() shape functions for creative masking effects.

Q: What browsers support CSS clip-path?

clip-path is supported in Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. Always include -webkit-clip-path alongside clip-path for maximum Safari compatibility, especially for polygon shapes in older Safari versions.

Create, preview, and copy CSS clip-path shapes visually in real time.

Drag handles to reshape · Click canvas to add polygon points · Browse 25 presets.

Start Creating Browse Presets

Shape Type

Polygon

Snap to grid (5%)

Drag the handles to reshape · Click canvas to add a point

Generated CSS

Browser Support

Chrome 55+

Firefox 54+

Safari 9.1+

Edge 79+

For maximum compatibility, also include -webkit-clip-path alongside clip-path.

Preset Shapes

Click any shape to load it into the editor above.

Frequently Asked Questions

Everything you need to know about CSS clip-path.

What is the CSS clip-path property?

clip-path creates a clipping region that determines which part of an element is visible. Anything outside is hidden. It supports circle(), ellipse(), polygon(), inset(), and path() shape functions for creative masking effects.

How does polygon() work in clip-path?

polygon() takes x y coordinate pairs as percentages. Example: clip-path: polygon(50% 0%, 100% 100%, 0% 100%) creates a downward triangle. Coordinates are relative to the element's bounding box and define the visible region clockwise.

Does clip-path affect document layout?

No — clip-path only affects visibility. The clipped element still occupies its original space in the document flow and other elements don't reflow around it. To wrap text around a shape, use shape-outside on floated elements instead.

What browsers support CSS clip-path?

clip-path is supported in Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. Always include -webkit-clip-path alongside clip-path for maximum Safari compatibility, especially with polygon shapes.