The CSS polygon() basic-shape function defines a shape from comma-separated x- and y-coordinate pairs. Each pair places one vertex, so the shape can be a simple triangle, a kite, or a more complex outline. section 14.3.1
Clip an image into a polygon
Apply the polygon to clip-path when the visible area should follow a custom outline. This triangle uses the top center, bottom-right, and bottom-left of the element: clip-path: polygon(50% 0%, 100% 100%, 0% 100%). Change the number or position of the points to create another shape, such as a sideways kite. section 14.3.1
Use polygon() when you need to:
- Shape the visible space around an important part of an image. section 14.3.1
- Carve an unusual border near an element’s edges. section 14.3.1
- Reuse the same custom shape with clip-path and shape-outside so text wraps around it. section 14.4.2
Listing 14.12 A polygonal clipping shape
.clipped {
clip-path: polygon(380px 50px, 650px 210px, 520px 500px, 20px 360px); #1
}
Inspect the complete polygonal clipping declaration and adjust its four vertices to understand how each coordinate changes the rendered outline. section 14.3.1
Polygon coordinates often require visual adjustment. Firefox DevTools can edit each vertex interactively and add points by double-clicking an edge; other major browsers do not provide this tool. section 14.3.2
