Hi folks!
How do I eliminate the white space from my trapezoid clip-path div? I want the divs to have only a small amount of white space between them, or an amount adjustable by me, but not determined by the clip path. (See screenshot images below) Thanks in advance for your help!
Have you tried with position: absloute; ?
No, that will mess things up, I believe… see Codepen link here: https://codepen.io/IDCoder/pen/jvqdqv
@mblmarlon, ok that can work…thanks…don’t know how I didn’t think of that! Now also, how can I make the trapezoid shape/div scale responsively without losing the angle?
HMM… I took a look at your code. So what i would do is to take the image, position it absolute to the one you want it to connect with and than build your content as own block.
This would have following result:
Since your content is an own block and the “background-image” is an own block the content wont always lay on the BG. But since the BG is positioned absolute the content does lay on the image.
However i guess the content is supposed to be just where it is. Now it could get a bit tricky…
I m thinking of a wrapper. The wrapper is positioned by margin, padding or absolute. If you make it absolute don’t forget to add right and left 0 to make it 100% wide.
Now inside the wrapper you can play around with the content and it’s background. If it crashes on a few resolutions thats fine. Thanks to the @media screen and (max-width: 767px) { } you can write the styles for the different screen sizes. it should be quite responsive tho with the wrapper
Hi @mblmarlon! Are you referring to the issue of getting the bottom angle of the trapezoid div to remain the same as screen size decreases?
Ah, you want the trapezoid to always be the same size even if the screen size decreases?
