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
My first thought was SVG as background image. Maybe clip-path works, too (I never used clip-path, so I'm not sure)
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
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.
you could shift the rightmost container left if you really needed that overlap though
position: relative; left: -40px; should do the trick I think?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
you could compensate for that with the width or by setting the
right property as well.I guess that could work, I'm not very good at judging that type of thing accurately...
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.that is very clever, and a very nice solution
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
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....
I will try with your suggestions,
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.