Thepolygon()CSS function is one of the<basic-shape>data types. It's used to draw apolygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape.

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>  <div></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%)

Thepolygon() 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 forfill-rule andpoints, andpoints is flexible about the use of space and comma separators. CSSpolygon() rules for separators are strictly enforced.

Parameters

<fill-rule>Optional

An optional value ofnonzero (the default when omitted) orevenodd, 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'sreference box.

Return value

Returns a<basic-shape> value.

Description

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

Thepolygon() function accepts comma-separated coordinates or points as its values. Each point is represented by a pair of space-separatedx andy 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 CSSclip-path property using thepolygon() 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></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 theshape-outside property.

<div>  <div></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>

.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:clip-path,shape-outside
• Guide to Basic Shapes