Complex layout

How do you guys implement something like this?
No description
12 Replies
MarkBoots
MarkBootsā€¢12mo ago
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)
MarkBoots
MarkBootsā€¢12mo ago
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...
Jochem
Jochemā€¢12mo ago
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
MarkBoots
MarkBootsā€¢12mo ago
yea, that one is tricky. i was thinking of creating a clip-mask-image with a lot of calculated gradients.
Jochem
Jochemā€¢12mo ago
most likely I'd grab a spray bottle of water and visit the designer though šŸ˜„
MarkBoots
MarkBootsā€¢12mo ago
that first yes
MarkBoots
MarkBootsā€¢12mo ago
normally i see it as a challenge, but this will cost me a full day of stress
Jochem
Jochemā€¢12mo ago
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
rainrain
rainrainā€¢12mo ago
apparently it's from work T___T anywaay will look into the video. thankss for the help guys!
capt_uhu
capt_uhuā€¢12mo ago
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.
Want results from more Discord servers?
Add your server