- From: Bramus via GitHub <sysbot+gh@w3.org>
- Date: Thu, 13 Jun 2024 21:04:23 +0000
- To: public-css-archive@w3.org
bramus has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-masking] Inverse clip-path == 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: ```css @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: ```css @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`? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10445 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 13 June 2024 21:04:24 UTC