变换：旋转背景色

Question

我遇到转换问题：在我的一个标题上旋转。我试图让整个页面的上半部分略微倾斜，这包括文本和背景。当我旋转div时，它会创建空白区域，而不是使用背景颜色填充其余内容。我试图实现的效果是将蓝色轮廓的区域设置为相同的红色，因此它从页面的左侧向右扩展。这是截图：

这是我的代码：

<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

凯文在评论中提出的建议：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

}