Substract image with css
hello there any ideas how to implement this to css from figma?
im kinda understand how to make top one, but bottm one kinda tricky there's should be a shadow from image, i was thinking about clip-path or mask but im not sure
btw price may have mroe numbers so it should be dynamic, and top one as well
i've done this so far, thanks for any help!

28 Replies
looks like that for now

Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way!
🔗 Links
✅ The original tweet: https:...
Nice was just about to link that ty
nice hehe
thanks will check this out!
looks nice, thanks again
Kevin said about mask
do you have any examples of how mask should look?
and how apply it
You can use a mask with a gradient to mask out parts. the color that you use in the gradient doesnt matter at all. i always use red because it is short and easy. and for the transparency i just use #0000 because once again, it's short and easy 🙂

So you can do the same with a radial-gradient

Or you can do with a linear gradient or whatever you prefer
can i use svg file as a mask?
Yeah you can
thanks
np 🙂

okay i've done smth similar
but i have no idea how to apply shadow to inner corner
Yeah adding a shadow/glow effect will definitely be a great challenge. that really wont be easy at all...
You could try
filter:drop-shadow(0 0 10px red);
but i don't think that is going to work...
Most likely it will require tons of code to get shadow to work as you want...already done that
looks like that
i also added shadow to price to hide shadow there
but looks ugly and i dont know how to apply inset shadow to price to make it look nice
seems like i need svg mask
Aah, i thought you used
box-shadow
property
@PatrikFrom what i can see by reading your code, it seems like you have used box-shadow as i expectedYou can see difference here

yea i know about that)
but image are rectangle
its not png

text just overlap image
dont substruct it
Yeah well. i was expecting that it wouldn't work. but always worth giving it a try 🙂
perhaps i can use this element as a mask
Ah alright
like give it an id
Problem is that the mask will mask out everything, even shadow and text and everything
oh :c
what if add mask to child
and apply drop shadow to parent
It will still be the same behavior. the only thing you could do is to stack elements on top of each other like
Now you can put the mask on the mask div and put whatever you want on overlay and make the overlap stack on top of mask. that works, and this is the only way