CSS polygon() Function
Example
Clip an image to a polygon:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS polygon() function defines a
polygon.
The polygon() function is used with the
clip-path property and the
shape-outside property.
| Version: | CSS Shape Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| polygon() | 37 | 79 | 54 | 10.1 | 24 |
CSS Syntax
polygon(fill-rule,
length-percentage)
| Value | Description |
|---|---|
| fill-rule | Optional. Specifies the filling rule. Can be nonzero or evenodd. The default value is nonzero |
| length-percentage | Required. Specifies points that define the polygon. This can be a length or percentage value. Each point is a pair of x and y coordinates. 0 0 defines the left top corner, 100% 100% defines the right bottom corner |
More Examples
Example
Clip an image to a polygon:
img {
clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}
Try it Yourself »
Example
Use of polygon(), clip-path and shape-outside:
img {
float: left;
clip-path: polygon(50% 0%, 100% 50%,
50% 100%, 0% 50%);
shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Try it Yourself »
CSS reference: clip-path property.
CSS reference: shape-outside property.
CSS reference: circle() function.
CSS reference: ellipse() function.
CSS reference: inset() function.
