Best way to create this effect
I'm trying to create this effect, where the overlapping image is cutting out a part of the underlying image. In this specific scenario you could probably get away with a border? But I'm thinking of using masking or clip path to also learn it better. I've messed around with some before/after pseudoelements but couldn't get it working, and my real question is :
Would it be best to just use a svg mask? And apply that? seems like the least hassle after you get the svg created.
9 Replies
if you can use a simple border with a radius, 100% go for the border with the radius
You can use negative margin
like this for example- https://codepen.io/deerCabin/pen/BaMBpoz
here with a mask-image (radial-gradient) instead of a border
https://codepen.io/MarkBoots/pen/XWOrpqO
what's the benefit of doing that instead?
well, the background shows through. you don't have to match the border and background color
Also, this is what OP asked
that's a cool way of doing it, seems like a lot more css to me though haha
as long as it has a purpose and it's not unnecessarily much, that's okay. Depends on the task
Thanks guys, that should do it! will mark as solved 😄