not -solved: ClipPath
Problem One:
Why doesnt my clip-path on the pseudo element in the top right corner look the same as the hotpink svg with the same path ? the circle cutout isnt in the middle and its squished.
https://codepen.io/Miss-Fox/pen/abrwMjq?editors=1100
Problem One Solution
had to convert the clip-path to a relative path with this site https://yoksel.github.io/relative-clip-path/
Problem Two:
If I declare overflow hidden or clip on the label element , everything breaks?? The clip-path on the pseudo element no longer is applied
6 Replies
I'm spending far too much time on this 😆
Interestingly, if you uncomment your overflow: hidden and remove the border-radius, the overflow does work (but of course your toggle looses it's shape)
I think it has to do with
overflow: hidden creating a new formatting context
i have to dive more into it to know why it affects the filter thing and how to get around it (unfortunatly not much time today)clip-path: inset(0); on the label gets it closer but the saturation still shows at the corners.
I haven't been able to achieve a pill-shape clip-path that works with the inset.Take a look at this one:
https://codepen.io/cbolson/pen/xxNLwzY
I have started again, only keeping your background images and the way you positioned them within the label.
I have slowed the animation down so that you can see that it "reveals" the images.
Please excuse my messy code and custom property naming.
clip-path: inset(0 round 999vw)
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset#border-radius
aw dont feel pressure to spend time on it chris!! interesting find on the border-radius. im wondering if i should just put the label in a separate div and clip the overflow on that instead. ill see if that works
thanks chris!
it seem to kill my clip-path on the pseudo element, the filter is still applied.