polygon() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

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.

Syntax

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

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.

Example

HTML

<div class="box">

  <div class="shape"></div>

  <p>

    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.

  </p>

</div>

CSS

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

}