polygon()

The polygon() function is a shape function used to specify a <basic-shape>.

The <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>
                

The 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 nonzero or evenodd. Default value when omitted is nonzero.

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, ...);