A legit CSS trick documented by Eric Meyer!
So there is polygon() in CSS and
Part of the problem is that polygon() in CSS only accepts numbers with units, like px, %, em, or whatever.
.clip-me {
/* Works! */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
/* Does NOT work */
clip-path: polygon(50 0, 100 25, 100 75, 50 100, 0 75, 0 25);
}
Which is exactly the opposite in SVG:
The trick is that you can force the SVG coordinates to behave like percentage coordinates (even with weird viewBoxes) with some light math, a transform attribute, and a special clipPathUnits attribute.
Those two values are 1/329.6667 and 1/86, respectively, and they effectively scale every point in the d attribute to fit into the needed 0–1 range. Thus we have an SVG clipping path that scales with the element and fits to its dimensions!
Direct Link ?