Задать поле перекоса <section> - PullRequest
Новая
       39

Задать поле перекоса <section>

3 голосов
/ 13 марта 2019

Я только перекосил раздел, который служит баннером.

Теперь этот участок занимает большую высоту, чем ожидалось, очевидно из-за перекоса.

Как я могу определить мое нижнее поле на основе этой новой высоты? 

.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>

Если вы откроете фрагмент во весь экран и измените размер окна, вы поймете, что я имею в виду ... Контент просто скрывается за баннером.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 13 марта 2019

На самом деле размер изменяется в зависимости от ширины, поэтому обновляйте поля в зависимости от ширины, для этого вы можете использовать единицу 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>
1 голос
/ 13 марта 2019

Вы также можете наклонить .content с тем же преобразованием, а затем отменить перекос содержимого внутри: 

.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>
...