Understanding the Clip-Path Polygon Coordinate System

The Axis System

Clip-path coordinates use a system where (0% 0%) is the element's top-left corner and (100% 100%) is the bottom-right. The first value in each coordinate pair is the horizontal (x) position, and the second is the vertical (y) position — exactly the same convention as most 2D coordinate systems in graphics and design tools.

polygon() Syntax

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

Each coordinate pair defines one vertex (corner point) of the shape. The points connect in the order they're listed, forming a closed shape once the last point connects back to the first.

Plotting a Triangle

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

This starts at the top-center (50% 0%), goes to the bottom-left corner (0% 100%), then to the bottom-right corner (100% 100%), and closes back to the starting point — producing an upward-pointing triangle.

Plotting a Diamond

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

Top-center, right-center, bottom-center, left-center, in that order — four points tracing a diamond shape around the element's midpoints.

Why Clockwise Order Matters

Points are conventionally plotted in a clockwise direction, though the browser will still render points listed in a different order — the shape simply follows whatever order the points are given in. Sticking to a consistent clockwise convention makes it far easier to reason about and edit coordinates by hand, especially as shapes get more complex than a simple triangle or diamond.