clip and mask using circle css
hi , am facing a challenge in designing above attachment. I am able to design the card but the circular design at center is challenging. please guide me.
10 Replies
You mean the notches?
you can use radial-gradient mask-images
small example
https://codepen.io/MarkBoots/pen/RwvWgdd
for the top part i have 2 radialgradients on bottom left and bottom right corner
for the bottom part the 2 radialgradient on top left and top right corner
This doesn't work on FF for me
wait maybe i forgot something
I think it needs to be prefixed on FF
yea i did, trying to figure out why its not okay yet
it works now, webkit didnt like the mask shorthand property
🥳 great solution
FYI,
mask has been good to go un-prefixed in Firefox for about 7 years. Chrome and Safari are finally working on fixing their implementations as part of Interop 2023yea, thought so too, think i made another little error before. don't know what it was, but it's fixed
Great solution , Thanks @MarkBoots