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.
No description
10 Replies
vince
vince•13mo ago
You mean the notches?
MarkBoots
MarkBoots•13mo ago
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
vince
vince•13mo ago
This doesn't work on FF for me
MarkBoots
MarkBoots•13mo ago
wait maybe i forgot something
vince
vince•13mo ago
I think it needs to be prefixed on FF
MarkBoots
MarkBoots•13mo ago
yea i did, trying to figure out why its not okay yet it works now, webkit didnt like the mask shorthand property
vince
vince•13mo ago
🥳 great solution
capt_uhu
capt_uhu•13mo ago
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 2023
MarkBoots
MarkBoots•13mo ago
yea, thought so too, think i made another little error before. don't know what it was, but it's fixed
RaviTeja
RaviTeja•13mo ago
Great solution , Thanks @MarkBoots
Want results from more Discord servers?
Add your server