Regarding CSS shapes

There is a new ui tryout where I am working, i am not sure how to achieve this shape. Like the slanting on the edges of the left section and bottom right section. Can anyone give me suggestions on how i can approach it.
13 Replies
Wolle
Wolle•16mo ago
My first thought was SVG as background image. Maybe clip-path works, too (I never used clip-path, so I'm not sure)
stealthy
stealthy•16mo ago
Hi thanks for replying, will clip path works here like clip path requires squared box shape inside it only it will clip, so on the bottom centre I don't think it will work
Joao
Joao•16mo ago
I'm not too sure either, but I don't think clip-path would work in this case. If you look closer you will see that the containers are overlapping at points. clip-path would help to give it a custom shape but cannot expand the reach of the container. So this must be some kind of background image. Mmm on second thought they may not be actually overlapping, it just looks that way. Probably not using any padding or margin to achieve this effect.
Jochem
Jochem•16mo ago
you could shift the rightmost container left if you really needed that overlap though position: relative; left: -40px; should do the trick I think?
Joao
Joao•16mo ago
But then the spacing on the right would be off unless it was measured exactly? I also just noticed the different padding on the bottom and it bothers me a bit 😄 I think it's also different spacing on the sides
Jochem
Jochem•16mo ago
you could compensate for that with the width or by setting the right property as well.
Joao
Joao•16mo ago
I guess that could work, I'm not very good at judging that type of thing accurately...
capt_uhu
capt_uhu•16mo ago
easiest way I've been able to come up with for this kind of thing over the years is an ::after panel with a transform: skew(). https://codepen.io/jsnkuhn/pen/MWzLjQJ?editors=0100 css working group is looking into being able to do something like this with a corner-shape/element-shape property but that's a ways off still.
Jochem
Jochem•16mo ago
that is very clever, and a very nice solution
stealthy
stealthy•16mo ago
Hi @jsnkuhn thats great, can we do the same concept for bottom right card as well as you can see those two have different shapes at the bottom and they share the exact opposite deg of skew
Chris Bolson
Chris Bolson•16mo ago
I have taken @jsnkuhn s code a little bit further to do just that https://codepen.io/cbolson/pen/jOQdVzY ah, I missed off the top angle on the bottom right card....
stealthy
stealthy•16mo ago
I will try with your suggestions,
capt_uhu
capt_uhu•16mo ago
made an effort at adding the second element with the 2 angles: https://codepen.io/jsnkuhn/pen/MWzLjQJ?editors=1100 results are a little... meh.... Might be good enough with a little magic number tweaking but in reality if I were tasked with this I'd probably just use border-image with PNGs or SVGs.
Want results from more Discord servers?
Add your server