polygon()

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

Try it

Syntax

css

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

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-polygon

Browser compatibility

BCD tables only load in the browser

See also