Set margin of skewed

Question

I just skewed a section which is serving as a banner.

Now this section takes a higher height than expected obviously because of the skew.

How can I define my bottom margin based on this new height?

.banner{
    transform: skewY(-5deg);
    transform-origin: top right;
    outline: solid 1px black;
    margin-bottom: 5rem;
}

<section class="banner">
  <h1>Hello World!</h1>
  <h2>Subtitle</h2>
</section>
<div class="content">
  <p>CONTENT</p>
</div>

If you open the snippet in full screen and change the window size you know what I mean... The content just gets hidden behind the banner.

Thanks in advance!

Check this out: https://stackoverflow.com/questions/18663430/css-transform-math-calculate-height-of-div-caused-by-skew — Chris Barr, Mar 13 '19 at 15:35

score 2 · Accepted Answer · answered Mar 13 '19 at 15:31

2

Actually, size is changing based on width so update margin based on width, for that you can use unit vw.

.banner{
    transform: skewY(-5deg);
    transform-origin: top right;
    outline: solid 1px black;
    margin-bottom: 9vw;
}

<section class="banner">
  <h1>Hello World!</h1>
  <h2>Subtitle</h2>
</section>
<div class="content">
  <p>CONTENT</p>
</div>

answered Mar 13 '19 at 15:31

Pranav C Balan

113,687
23
165
188

1

this works like a charm! Did not know that vw even existed! Thanks – FabZbi Mar 13 '19 at 16:04

score 1 · Answer 2 · answered Mar 13 '19 at 15:30

1

You can also skew .content with the same transformation and then unskew the content inside:

.banner {
  transform: skewY(-5deg);
  transform-origin: right;
  outline: solid 1px black;
}

.content {
  transform: skewY(-5deg);
  transform-origin: right;
}

.content p {
  transform: skewY(5deg);
  transform-origin: left;
}

<section class="banner">
  <h1>Hello World!</h1>
  <h2>Subtitle</h2>
</section>
<div class="content">
  <p>CONTENT</p>
</div>

answered Mar 13 '19 at 15:30

Temani Afif

245,468
26
309
415

This works too.. But I prefere vw as shown in the answer above! Thanks a lot! – FabZbi Mar 13 '19 at 16:05

Set margin of skewed

2 Answers2