polygon() | CSS-Tricks

The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.
As with the other functions that produce a basic shape — including circle(), ellipse(), inset(), xywh(), path() and shape() — you won’t be drawing shapes directly on the screen in the way you’d normally think. You will either be creating a shape for text and elements to flow around (shape-outside), creating a cookie cutter to cut the shape out of another element (clip-path), or creating a shape that another element could move along (offset-path).
Clarification note: Neither path() nor shape() can be used with the shape-outside property like the other basic shape functions.
Before we get too deep, let’s discuss the reference box. This is the box upon which the basic shapes used in shape-outside and clip-path is formulated.
By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.
For the shape-outside property, this means the text and elements will flow around the element as if no shape-outside property was used. For clip-path, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you’ll need to add the appropriate keyword (margin-box, padding-box, border-box, etc.) to clip-path or shape-outside.
The offset-path property is not limited by the reference box in the same way shape-outside and clip-path are limited by it. An offset-path whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is “drawn.”
Let’s start with clip-path so that we can more easily see the size and edges of the polygons we create.
Next, let’s use shape-outside to flow some text along some starry sides. Notice that you can only see the right side of the star because the text only flows around the right side of the shape.
Finally, let’s animate our star around a star using offset-path:
In plain English, this means that the polygon() function accepts two parameters: a fill rule and the X and Y coordinates of the shape in length units.
The polygon() function takes an optional keyword — the fill rule — and a set of points, i.e., the polygon’s vertices.
The first keyword in the polygon() function (which was omitted from the above examples because it’s optional) is the fill rule. This tells the browser how to fill the shape with color. There are two options: nonzero and evenodd (the same as in SVG). In most shapes, they work the same, however, when a polygon overlaps itself, the algorithms differ on what they fill with color and what they don’t.
The algorithm descriptions below are included for completeness. You don’t need to understand how the algorithms work to use polygon(). Most of the time you can use the default value (nonzero) and it will work the way you’d expect. If it ever isn’t working the way you want, try switching to evenodd. And if that doesn’t work, then the fill rule isn’t the issue.
If a fill rule is used it should be followed by a comma (,).
The set of points is a comma separated list of space separated X and Y coordinates.
There must be at least three points (I see you there, Mr. Triangle), but there’s no upper limit on the number of points so whether enneacontagon (90 sides) or hectotetracontagon (140 sides) fit your fancy you can create them with polygon().
Points will be connected from the first point to the next all the way through with the last point automatically connecting back to the first. Thus the order the points are in will determine the final shape. If you mix up the order of the points you could have a very, very different shape than what you started with.
You cannot have open line segments with polygon(). It has to be a closed shape (it has to be a polygon after all), but there’s no requirement that the polygon doesn’t twist and turn over itself (hence the need for the fill rule earlier).
You can create shapes that appear to be separate by repeating points (sort of running two edges of the cookie cutter so close that they virtually disappear). In the next demo, the bottom-right point of the upper star is followed by the left-most point of the lower star. The lower star’s points are then all listed, finishing with a repeat of the left-most-point of the lower star. We then repeat the bottom right point of the upper star and finish out the rest of the upper star. (The “Widen Connecting Point” button below simply offsets the repeated points by half a percent to show the connective tissue.)
You can even recreate the wild imaginings of Lewis Carroll like in his poem, The Mouse’s Tale:
You can even animate from one polygon to another, though for best results animate between two polygons with the same number of points. The browser doesn’t require them to be the same number of points, but the tweening can get wild when it tries to go from a single point to two or more.
The CSS polygon() function is defined in the CSS Shapes Module Level 1 specification, which became a Candidate Recommendation on June 12, 2025. That means it integrates changes from a previous Candidate Recommendation (Draft or Snapshot) to allow for review and for ease of reference to the integrated specification, but those changes have not undergone a formal review.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shi