An alternative explanation of how CSS polygon clip path rules work

With a polygon clip-path we can take a basic square:

<div style="width: 200px; height: 200px; background-color: darkgreen;"></div>

... and cut parts out:

<div style="width: 200px; height: 200px; background-color: darkgreen; 
    clip-path: polygon(0 0, 100% 50%, 0 100%);"></div>

The clip-path is as follows:

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

Sometimes we see CSS rules that use 0, without a unit such as em, % or px. 0 is shorthand for 0%, 0em, 0 units, "nothing". The unit doesn't matter, it is 0 in any unit.

The attribute clip-path says that we are going to cut (clip) part of the HTML-tag.

The attribute value polygon means that we are going to describe a shape by making a list of points that will have lines drawn between them. In other words, we are going to draw the outline of a shape.

The parameters to polygon are the points that we want to have a line drawn between. In this example we ask for a line that starts at the top-left point, "0, 0", and goes to the point "furthest to the right, halfway down". Then we go from there to the point "0, 100%", meaning "left, all the way down".

In other words, clip-path: polygon(0 0, 100% 50%, 0 100%) means we want to clip along a path. We want to take a scissor to the original HTML tag. That scissor goes from "left, top", to "right-most, at the middle line", to "left, bottom".

We can add as many points as we like. We can also specify the last cut, from the bottom left to the top left, but that is not necessary. The line automatically ends at the point where the line started.

% and px can be mixed. For example, we might add another point, 100px 100px. That means we want to continue cutting, from 0 100% to 100px 100px.

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