html - CSS3 Transform rotate 改变流

Question

我需要创建一个网站，其背景图像覆盖有白色背景颜色:

现在的问题是，CSS3 Transform rotate 属性改变了 HTML 的流，但没有更新所述 HTML 的高度。

为了演示这一点，我附加了一些文本来创建一个滚动条:

如您所见，页面切断了背景图像，当我删除转换时，背景在它应该结束的地方结束:

生成旋转白色背景的元素是主要内容内的绝对定位 div，顶部和底部为 0px，左右为 100vw，以确保当我旋转它时它不会显示任何 Angular 落。实际的背景图像是一个绝对定位的 div，所有边都是 0px，但同样可以通过将它提供给 HTML 标记来实现。

我知道为什么它会创建一个额外的滚动条，因为 w3 声明的定义:

W3 info about adding a scrollbar

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area.

现在我的问题是，为什么(绝对)元素的转换会创建一个额外的滚动条，但不会相应地更新 HTML 以显示适当的背景(例如)？我怎样才能正确解决这个问题？

Answer 1

也许使用background gradient 可以，它可以放在 background-image 之上或在页眉和页脚内(图像也可以分成这两个部分) ，其中内容仅包含背景色。

section {
  background: linear-gradient(-189deg, transparent 10em, white 10.2em, white 50%, transparent 55%), linear-gradient(351deg, transparent 10em, white 10.2em, white 50%, transparent 55%), url(https://static.pexels.com/photos/105294/pexels-photo-105294-medium.jpeg);
  background-size: cover;
  width: 1020px;
  margin: auto;
  border:solid;
}

nav {
  padding: 4em 1em;
}

footer {
  font-size: 2em;
  padding: 3em 2em 1em ;
  text-align: right
}

aside {
  float: left;
  width: 25%;
  margin: 3%;
  padding: 1em;
  background: white;
  box-shadow: 5px 5px 5px 5px;
}

aside img {
  max-width: 100%;
}

article {
  padding: 1em 3%;
  overflow: hidden;
  /* extra demo purpose to resize content */
  transition:0.5s;
}
article:hover {font-size:0.5em;}

<section>
  <nav><a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a> 
  </nav>
  <div>
    <aside>
      <img src="https://static.pexels.com/photos/139229/pexels-photo-139229-medium.jpeg" />
    </aside>
    <article>
      <h1>HTML Ipsum Presents</h1>

      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
          turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>
    </article>
    <footer>
      footer standing at bottom</footer>
  </div>
</section>