I’ve been working a lot with the
clip-path property recently, as I write the chapter on filters, blends, clipping, and masking for CSS: The Definitive Guide’s long-delayed 4th edition (available now in early-release format!). One of the nifty things you can do with clipping paths is define them with percentage-based coordinates. For example, here’s a hexagon-like clipping path:
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
That starts at the center top (
50% 0), goes to the right edge, quarter-down (
100% 25%), and so on.
When I got to SVG-based clipping, which you can use with the CSS pattern
... read the whole story at meyerweb.com.