Today's CSS Battle
Hey guys :D
I'm not a CSS professional (yet) and I'm having some problem with today's cssbatle.
Can someone help me out how to do the scalloped border here?
10 Replies
the most likely candidate for this particular one for me would be three layered radial gradients
that looks like three overlapping circles to me
^^ I'll read the docs about those, thanks
it's a combination of using multiple definitions in background-image for radial-gradient with a hard cut-off (two values with the same position in the gradient like the third example there)
Use the square as a mask and then use 3 ovals shaped the same way like the preview. Eye and mouth also mask ig.
an SVG clip-path could work too, but it's much harder to make an SVG than to position a couple of radial gradients
I think to me personally radial gradients are trickier to get right and to cusomize.
i like to do my cssbattles with background properties only. this is a way to do it. But there are lots of other ways
didnt know this was a thing here
Oh wow, good job, lol.
I wish I would be able to understand those props
just break them down one by one, you can always ask if you're missing details