CSS Polygon Clip-path Examples
The polygon() function is the most versatile clip-path shape — it can create any outline from triangles to complex custom shapes. Here are the most commonly needed polygon clip-paths with copy-ready code.
CSS Clip-path Generator
Create CSS clip-path shapes visually — circle, ellipse, inset, or polygon with draggable points. Copy production-ready CSS.
Polygon Points (3)
Drag points on the preview or edit values below.
Shape Presets
Preview Colors
Preview
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Ctrl+Enter to copy CSS
Clip-path Reference
circle(r at cx cy) — circular clipellipse(rx ry at cx cy) — elliptical clipinset(t r b l round br) — rectangular clip with optional roundingpolygon(x1 y1, x2 y2, ...) — arbitrary polygon with unlimited verticesSupported in all modern browsers. Use -webkit-clip-path for older Safari versions.
Basic geometric shapes
Triangle: polygon(50% 0%, 0% 100%, 100% 100%). Diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%). Pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). Hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Each shape is defined by vertex coordinates as percentages of the element dimensions.
Stars and decorative shapes
A 5-point star alternates between outer and inner radius points: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). A cross shape uses 12 points: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%). More points allow more complex outlines.
Arrows and UI shapes
Right arrow: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Chevron: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%). Message bubble: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%). These work well for navigation elements, badges, and decorative containers.
Frequently Asked Questions
How many points can a polygon clip-path have?
There is no hard limit — browsers handle hundreds of points. However, more points mean more CSS to maintain. For most UI shapes, 3-12 points are sufficient. Complex curves are better expressed with path() or an SVG clip-path rather than approximating with many polygon points.
How do I make a responsive polygon clip-path?
Use percentage coordinates — polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) scales with the element. Avoid mixing percentages and fixed lengths unless you want the shape to change at different sizes. For truly responsive shapes, CSS custom properties can parameterize the values.
Can I create rounded polygon corners?
Not directly with polygon() — its edges are always straight lines. For rounded corners on polygon shapes, use an SVG clipPath with rounded path commands, or apply a slight filter: blur() and contrast trick. The inset() function does support a round keyword for rectangular shapes.
Related Generate Tools
JSON to GraphQL Schema
Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download
HTTP Request Builder
Build HTTP requests visually and generate code in cURL, JavaScript, Python, Go, Rust, and PHP — lightweight Postman/ReqBin alternative
HTML Table Generator
Build HTML tables visually with an interactive editor — add rows, columns, header rows, captions, and styling. Export as plain HTML, inline CSS, or Tailwind classes
CSS Filter Generator
Build CSS filter effects visually — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow with 12 presets and live preview