[css-masking] Inverse clip-path about csswg-drafts

[Afif13]

Here is a generic demo from my lastest article. All you have to do is to define the main shape as a variable and you get the cut-out version:

https://codepen.io/t_afif/pen/gOJvdav

It's basically what @thebabydino already said but I am also playing with the reference-box to easily control the space and also using "evenodd" to avoid issues related to the order of points

[bramus]

Strawman proposal: clip-path-mode: invert?

[thebabydino]

The number of points of the shape inside shouldn't really affect the extra points needed to cut it out of the rectangular shape.

Suppose the list of coordinates creating the n-point shape inside is px1 py1, px2 py2, ... pxn, pyn

To cut it out of the element's rectangle you need to add in extra the four corners of the rectangle going either clockwise or the other way, starting from whichever corner's closer to the start point of the shape inside (let's say 0 0, 100% 0, 100% 100%, 0 100% - 4 extra points so far), duplicate the first corner's coordinates after that (in this case 0 0 - 5 extra points), drop in the inner shape points from before and duplicate the coordinates of the first shape point at the end (px1 py1 - 6 extra points). This is valid for any n-point shape.

Example.

---

For circles/ ellipses, regardless of whether they're inner or outer ones, I've never bothered with clip-path.

polygon() just isn't the best choice or curves save for rounded corners on polygons (examples: one, two) and even then just because we don't have anything better.

path() only accepts px, which makes it completely useless if we want to have anything responsive.

So I've always used a radial-gradient() mask. Something like:

mask: radial-gradient(var(--r), #0000 100%, red)

This produces a jagged circle, but it can be smoothed out with a 1px transition between fully transparent and opaque.

Examples: one, two.

[bramus]

The "all you have to do" part is what I'm aiming to simplify here. It's not that easy for "regular" authors to do.

The solution would also play nice with all clip-paths, not just those that use polygon()

[SebastianZ]

Strawman proposal: clip-path-mode: invert?

I wouldn't necessarily introduce a separate property for that but just add this keyword to clip-path.
If the need to set it separately from the shape arises, we might still introduce a longhand for it later on and turn clip-path into a shorthand.

Sebastian