polygon() CSS Function


The CSS polygon() function is a CSS function that allows you to define custom polygons by specifying a series of x and y coordinates. These coordinates form the points of the polygon, defining its shape. The polygon() function is primarily used with the clip-path property to create clipping paths or masks for elements. This means you can do things like:

  • Have text flowing around an element in the shape that you specify.
  • Have an image clipped to that shape.
  • Create custom shapes for buttons, links, and other elements.

The polygon() function takes two parameters:

  • A series of x and y coordinates, separated by commas.
  • An optional fill rule, which specifies how the polygon is filled. The default fill rule is nonzero, which means that the polygon is filled if the number of points inside the polygon is odd. The other fill rule is evenodd, which means that the polygon is filled if the number of points inside the polygon is even.

Here is an example of how to use the polygon() function to create a triangular clipping path for an image:

.image {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

This will clip the image to a triangle with its base at the bottom and its apex at the top.

The polygon() function is a powerful tool for creating custom shapes and layouts in CSS. It is supported by all major browsers.


polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )


  • <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.


<div class="box">
<div class="shape"></div>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
.box {
width: 250px;

.shape {
float: left;
shape-outside: polygon(
0 5%,
15% 12%,
30% 15%,
40% 26%,
45% 35%,
45% 45%,
40% 55%,
10% 90%,
10% 98%,
8% 100%,
0 100%
width: 300px;
height: 320px;

p {
font-size: 0.9rem;

Browser Support

The following table will show you the current browser support for the CSS polygon() function.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023