The polygon() CSS function is one of the <basic-shape> data types.
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%);
<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.
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 |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-polygon |
| 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 |
clip-path, shape-outside
© 2005–2023 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