The polygon() CSS function is one of the <basic-shape> data types.


clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%);


An optional value of nonzero (the default when omitted) or evenodd, which specifies the filling rule.
Three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.


Basic polygon() example

In this example a shape is created for text to follow using the polygon(), you can change any of the values to see how the shape is changed.


Specification Status Comment
CSS Shapes Module Level 1
The definition of 'polygon()' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

BCD tables only load in the browser

See also