Help with Skewed Div

HTML-CSS
1

I’m trying to use a skewed background to separate the divs, for now I’m using the “transform: skew(Xdeg, Xdeg);” in the main div and a negative value to the tansform in the div inside that has all the contents.
The problem is there’s always this white space in the end of the divs that appears if the screen is too big:

espa%C3%A7o_em_branco
espa%C3%A7o_em_branco1366×693 69.8 KB

I almost fixed it by using a margin-top and bottom of -100, it looked like this:

margin_top_bottom_100_negativo
margin_top_bottom_100_negativo1366×694 34.4 KB

But with the zoom (30%), the white space still appears:

zoom
zoom1366×696 34.5 KB

My goal is to make something that in the design looks something like this:

deus_do_paint

The pen I’m doing those tests is this one: https://codepen.io/JAEN_C/full/dKJmWj/;

I’ll try to use it after I properly learn how it works in the pen of the Product Landing Challenge, here: https://codepen.io/JAEN_C/full/WyGaNy/;

How would be the better way to fix it? I’m almost one week trying to make the skewed background work properly.

2

Hi @JAEN

I had a go at re-creating your design using pseudo-elements and rotating them rather than skewing them.

Is it kinda what you were after? https://codepen.io/joesmith/pen/zapVdd

If you wanted to change the starting angles, you could switch the declarations to be like this:

  &#two, &#four
    &::before
      content ''
      width 200%
      height 100vh
      position absolute
      top 0px
      right 0px
      transform-origin top right
      transform rotate(5deg)
      z-index 10
    &::after
      content ''
      width 200%
      height 100vh
      position absolute
      bottom 0px
      right 0px
      transform-origin bottom right
      transform rotate(-5deg)
      z-index 10

Note: I did use stylus to create this, however, you can view the compiled CSS by clicking the dropdown top right of the CSS pane and choosing “View Compiled CSS”.

EDIT: Just noticed a bug with the width of the pseudo-elements :blush:. Just fixing it now.

EDIT 2: Fixed it :smiley:

3

The design looks EXACTLY like what I was looking for, thanks, I just didn’t understood anything of the code :/, I don’t know if I did it right, I tried to add a

, and the white-space appeared again, I don’t know if I placed it the right way because of the kind of code you wrote. But in the design part, again, It’s exactly how I wanted to make the divs stay above each other.

4

What did you try and add and where?

It’s probably not the best code in the world so feel free to ask any questions. Also, don’t be afraid to play around, tweak it, inspect the console etc. All part of the fun :stuck_out_tongue:

5

Oh I’m sorry I must have used some wrong word, English is not my mother language, what I tried to say was that your code worked perfectly, the design looks exactly what I had in mind, but I didn’t understand probably because of Pug compiler, and I’m still new at Web-Development, I tried to add a

just after the #one, but I don’t even know if I used the right syntax for it, after I did so, the white-space appeared again.
6

Oh sorry I see, you can do the same with the html pane as you can with the CSS pane, click the link dropdown top-right and choose “View compile HTML” to view the actual HTML.

1 Like