polygon()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The polygon()
CSS function is one of the <basic-shape>
data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape.
Try it
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) 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'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:
axis | point 1 | point 2 | point 3 | point 4 | point n |
---|---|---|---|---|---|
x | 0% | 100% | 100% | 0% | xn |
y | 0% | 0% | 100% | 100% | yn |
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
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 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
Specification |
---|
CSS Shapes Module Level 1 # funcdef-basic-shape-polygon |
Browser compatibility
BCD tables only load in the browser
See also
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes