CSS polygon() Function

The polygon() function is a CSS basic shape value that's part of the CSS Shapes module.

Basic shapes such as polygon() can be used as a value for properties such as shape-outside to control the flow of content around the element, and clip-path to clip the element's contents to the basic shape.

This means you can do things like, have text flowing around the element in the shape that you specify, have an image clipped to that shape, etc.

Basic Example

Here's an example of how the polygon() function works with the shape-outside property:

<style>
div {  
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0px 0px, 200px 100px, 0px 200px);
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

Here we have a div floated to the left. And because I've applied the polygon() function to it, the subsequent text flows around the shape as specified.

It's easier to visualize this concept by looking at the following example.

<style>
div {  
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0px 0px, 200px 100px, 0px 200px);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

As you can see, the polygon is drawn within the floated box. The floated box actually protrudes out from the polygon area, into the surrounding text. In other words, the text is allowed to flow right up to where we've specified the polygon.

How to Specify the Polygon Dimensions

You must specify the dimensions of the polygon by providing arguments to the polygon() function. The arguments are provided in comma-separated pairs, which represent the x and y axis coordinates of a given vertex of the polygon.

At least three vertices must be provided, otherwise you'll end up with an empty float area.

You can use percentage or length values (e.g. px, em, etc) to specify the dimensions of the polygon.

Here's an example of using a percentage value.

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: polygon(0 0, 100% 50%, 0 100%);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

Using `polygon()` with `clip-path()`

Here's an example of using the CSS polygon() function with the clip-path property.

<style>
img {
 -webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 10% 10%);
 clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 10% 10%);
}
</style>

<img src="/pix/samples/15m.jpg" alt="Longtail boat in Thailand">

If your browser supports the clip-path property (and the polygon() function), the above image should appear in the shape of the polygon area. Otherwise it will appear in the normal dimensions of the image.

At the time of writing, browser support for the clip-path property is limited. None of the major browsers support it, however, webkit browsers have partial support using the -webkit- prefix.

Intersecting Polygons

If you create a polygon that crosses back over itself multiple times, you'll end up with an inside area that could either be filled or empty. You can use a fill-rule to determine what to do about this.

The fill-rule can be added as the first argument of the polygon() function. You can use either evenodd or nonzero (the default value).

Like this:

Here are two examples, that demonstrate the effect of the two fill-rule values.

Using nonzero (the default value):

<style>
img {
 -webkit-clip-path: polygon(nonzero, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
 clip-path: polygon(nonzero, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
}
</style>

<img src="/pix/samples/16m.jpg" alt="Boracay in the Philippines">

Using evenodd:

<style>
img {
 -webkit-clip-path: polygon(evenodd, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
 clip-path: polygon(evenodd, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
}
</style>

<img src="/pix/samples/16m.jpg" alt="Boracay in the Philippines">

Official Syntax

The official syntax of the polygon() function is as follows:

<fill-rule> can be either nonzero or evenodd. The default value is nonzero.

The syntax of <shape-arg> is:

Possible Values

As indicated in the official syntax, the polygon() function accepts the following values:

fill-rule

Specifies a fill-rule to use to determine the interior of the polygon. Can be either nonzero or evenodd. The default value is nonzero.

shape-arg

This can be specified in either of the following ways:

length: Specifies a length value to use (e.g. px, em, vw, etc) for the radius.
percentage: Specifies a percentage value to use. The percentage value uses the width and height of the reference box.

CSS Specifications

The polygon() function is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation, 20 March 2014)
It's also being further defined in CSS Shapes Module Level 2 (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.