polygon()

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

Syntax

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

Values

<fill-rule>

An optional value of nonzero (the default when omitted) or evenodd, which specifies the filling rule.

[<length-percentage><length-percentage>]#

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.

Examples

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.

Specifications

Browser compatibility

See also

• Properties that use this data type: clip-path, shape-outside
• Guide to Basic Shapes