polygon() CSS function

Try it

clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
);

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntax

/* Specified as coordinate list */
/* polygon(<length-percentage> <length-percentage>, ... )*/
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0px 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)

/* Specified as coordinate list and fill rule*/
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)

The polygon() parameters are separated by a comma and optional whitespace. The first parameter is an optional <fill-rule> value. Additional parameters are points that define the polygon. Each point is a pair of x/y coordinate <length-percentage> values separated by a space, e.g., "0 0" and "100% 100%" for the left/top and bottom right corners, respectively.

Note: The SVG <polygon> element has separate attributes for fill-rule and points, and points is flexible about the use of space and comma separators. CSS polygon() rules for separators are strictly enforced.

Parameters

<fill-rule> Optional

An optional value of nonzero (the default when omitted) or evenodd, which specifies the filling rule.

<length-percentage>

Each vertex of the polygon is represented by a pair of <length-percentage> values, which give the x/y coordinates of the vertex relative to the shape's reference box.

Return value

Returns a <basic-shape> value.

Description

You can create almost any shape with the polygon() function by specifying the coordinates of its points. The order in which you define the points matters and can result in different shapes. The polygon() function requires at least 3 points, which creates a triangle, but there's no upper limit.

The polygon() function accepts comma-separated coordinates or points as its values. Each point is represented by a pair of space-separated x and y values, which indicate the points' coordinates within the polygon.

polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

Given the above, mapping the coordinates of the container can be visualized as:

Applying those coordinates to the CSS clip-path property using the polygon() function:

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

This would create a rectangle shape the size of its parent content by specifying the coordinates of its four corners: top-left (0% 0%), top-right (100% 0%), bottom-right (100% 100%), and bottom-left (0% 100%).

Formal syntax

<polygon()> = 
  polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>  

Examples

Create a triangle

In this example, a triangle is formed by defining the coordinates of its three points.

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 400px;
  height: 400px;
  background-color: magenta;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Result

The coordinates for the triangle are the top-right corner (100% 0%), the center point (50% 50%), and the bottom-right corner (100% 100%) of the container.

Setting a polygon for shape-outside

In this example a shape is created for text to follow using the shape-outside property.

<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 nighta memorable night,
    as it was to provehundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

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

Specifications

Browser compatibility

See also

• Properties that use this data type: border-shape, clip-path, shape-outside
• Guide to Basic Shapes