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) orevenodd
, 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
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes