12 Replies
what is this? the shape?
In that case, not that easy.
A while back the challenge of a simular kind of layout had some traction on twitter. Think Kevin even made a video about it. (will try to find it)
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://twi...
here the tweet
https://twitter.com/florinpop1705/status/1647668618002329602
a clip-path with an SVG is probably easier to implement, though potentially a bit less responsive
the overlap on the left would be a pain though, hmm
yea, that one is tricky. i was thinking of creating a clip-mask-image with a lot of calculated gradients.
most likely I'd grab a spray bottle of water and visit the designer though š
that first yes
normally i see it as a challenge, but this will cost me a full day of stress
yeah, this is definitely one of those ones that's good to implement if you're doing it for fun, but I wouldn't want to implement it for work and then support it
apparently it's from work T___T
anywaay will look into the video. thankss for the help guys!
Please don't default to CSS battling everything. It's likely that when the designer created this they used some sort of mask image(s). Ask the designer if they can provide you with those image(s) to use as CSS
mask-image.