CSS polygon() function

Definition and usage

CSS polygon() Functions are used to define a polygon.

polygon() Functions with clip-path Properties and shape-outside Properties used together.

Example

Example 1

Cut the image into a polygon:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Try it yourself

Example 2

Cut the image into a polygon:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Try it yourself

Example 3

Usage 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 syntax

polygon(fill-rule, length-percentage)
Value Description
fill-rule

Optional. Specifies the fill rule. It can be nonzero or evenodd.

The default value is nonzero.
length-percentage

Required. Specifies the points that define the polygon. This can be a length or a percentage value.

Each point is a pair of x and y coordinates. 0 0 defines the top left corner, 100% 100% defines the bottom right corner.

Technical details

Version: CSS Shape Module Level 1

Browser support

The numbers in the table represent the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

related pages

Reference:clip-path attribute

Reference:shape-outside attribute

Reference:circle() function

Reference:ellipse() function

Reference:inset() function