The polygon()
CSS function is one of the <basic-shape>
data types.
polygon()
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) 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 2 # funcdef-basic-shape-polygon |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
polygon |
37
|
79
|
54
|
No
|
24
|
10.1
|
37
|
37
|
54
|
24
|
10.3
|
3.0
|
See also
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon