[css-masking] Inverse clip-path

[bramus]

When applying a clip-path it is sometimes wanted to do an inverse clip path to cut out a hole of something. To do that today, you need to get creative with positioning the points in a polygon, as detailed in https://css-tricks.com/cutting-inner-part-element-using-clip-path/ from 2015.

Take this revealing rectangle that opens up from the center, using 4 points in a polygon:

@keyframes clippy {
	from {
		clip-path: polygon(50% 0%, 50% 100%, 50% 100%, 50% 0%);
	}
	to {
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
	}
}

To invert that, you need this path which requires 8 points and then animate the 4 inner points:

@keyframes clippy--inverse {
  from {
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0%, 50% 0%, 50% 100%, 100% 100%, 100% 0%);
  }
  to {
    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 0%);
  }
}

Demo: https://codepen.io/bramus/pen/gOJXzrq/dda132b7b26b1236da82724053ac1643

For more complicated shapes such as an opening square/rectangle you need 10 points. And for some other shapes like a circle it’s not really possible as that requires script to calculate the inverse path and you’d need a whole bunch of points in order to get a smooth shape.

Ideally, an author would be able to reuse an simple shape – such as a circle – and invert that through other means. Masks for example have mask-composite: exclude. Maybe we can have something similar for clip-path?

[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.

[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]

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

[pmnzt]

This needs more attention, browser support will become a concern everytime we need a new feature.
but i really wish we had something like this before.

[smfr]

Maybe we need a Basic Shape that is a compound-path(windRule, shape1, shape2, ...) that takes two or more other Basic Shapes and combines them with the given wind rule?

[bramus]

While a compound-path with windRule would work, it would still complicate things for authors. Instead of them being able to flip a property (or adding a keyword) to change the behavior, they now need to edit the entire path.

[yisibl]

There are no rounded corners in any of these cases, and actually rounding corners can be even trickier. Even in the mask attribute, it's almost impossible to do it in pure CSS, and needs to be done in conjunction with SVG.

https://codepen.io/yisi/pen/BagqKNq?editors=0100

2024-09-02.22-21-35.mp4

I would also expect to be able to support syntax like mask: rect(10px 10px 100% 100% round 20px).

In addition, in my scenario, wouldn't it be better not to use CSS mask or clip-path, since CSS mask doesn't work well with inset box-shadow.

Maybe we need a new inner-border-radius property?
This would work well with background-clip: border-area to achieve inner rounded corners with a gradient.

@smfr I look forward to your suggestions.

[smfr]

This looks like a use case for border-shape.

[bramus]

Here’s an author request spotted in the wild for this: https://x.com/mattgperry/status/1896929274856427550

I wanted the pink overlay to have a "punch out" using clip-path and thought it would be as easy as an invert flag on inset() but it turns out I imagined this.