变换：旋转 background-color

Question

我在转换时遇到问题：在我的 headers 之一上旋转。我试图使页面的整个上半部分有轻微的倾斜，这包括文本和背景。当我旋转 div 时，它会创建白色 space 而不是用背景色填充其余内容。我想要达到的效果是让蓝色轮廓区域成为相同的红色，因此它从页面左侧扩展到右侧。这是屏幕截图：

这是我的代码：

<div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>

.header {

  background-color: $red-primary;
  color: $white;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);

}

如有任何建议，我们将不胜感激。

Answer 1

假设您的页眉相对于 window 左对齐，您可以使用相对定位将页眉移回左侧，从而用页眉背景颜色填充空白。

.header {
    background-color: $red-primary;
    color: $white;
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
    transform: rotate(-5deg);

    /* Add this */
    position: relative;
    left: -20px;
    padding: auto 20px;

}

Answer 2

凯文在评论中的建议：

body{
    overflow: hidden;
}
.header {
  background-color: #900;
  color: #fff;
  padding: 0 100px;
  margin: 0 -100px;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);
}

<div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>

变换：旋转 background-color

Transform: Rotate background-color

html

css

css-transforms