The polygon() function is a shape function used to specify a
<basic-shape> CSS value represents a basic shape that is defined using a shape function. A basic shape can then be passed as a value to a property such as the
shape-outside property, or the
clip-path property, which are used to apply the shape to an element in order to change the flow of content around it, or to clip the element to the defined shape, respectively.
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) /* where.. */ <shape-arg> = <length> | <percentage>
polygon() function is used to define more complex arbitrary shapes using any number of points. The function takes in a set of coordinate pairs (
<shape-arg> <shape-arg>), each pair specifying the position of a point. The first argument represents the x-position of a point, and the second argument represents the y-position. The set of points make up the shape. The browser will connect the last vertex in the list with the first vertex in the list to close the polygon, so you don’t have to do that yourself. Coordinate pairs are comma-separated, and can be set using either absolute lengths or percentages.
In addition to the set of coordinate pairs, the
polygon() function can take an optional argument called the
fill-rule. This specifies how to treat areas inside the polygonal shape that may intersect itself. See
fill-rule property in SVG for details. Possible values are
evenodd. Default value when omitted is
The following are all valid
polygon() function declarations:
polygon(0 0, 100% 100%, 0 100%); polygon(0 0, 100% 100%, 0 100%); polygon(50px 0px, 100px 100px, 0px 100px); polygon(170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, 336.50px 235.26px, 299.67px 196.53px, 259.33px 209.53px, 217.00px 254.76px); polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);
CSS Shapes Level 1
Allows geometric shapes to be set in CSS to define an area for text to flow around. Includes properties `shape-outside`, `shape-margin` and `shape-image-threshold`
W3C Candidate Recommendation
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com