变换：旋转背景颜色答案

【问题标题】：Transform: Rotate background-color变换：旋转背景颜色
【发布时间】：2015-11-07 03:07:12
【问题描述】：

我遇到了转换问题：在我的一个标题上旋转。我试图使页面的整个上半部分略微倾斜，这包括文本和背景。当我旋转 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);

}

任何建议将不胜感激。

【问题讨论】：

我会尝试在标题上使用否定的margin-left；并可能将padding-left 增加相同的数量。
它会生成一个不好的滚动条。
将overflow: hidden; 添加到获取滚动条的元素中。
那仍然会生成一个滚动条
你也可以试试position: relative; left: -20px;。而不是否定的margin-left；这应该可以避免水平滚动的任何问题。

标签： html css css-transforms

【解决方案1】：

Kevin 在 cmets 中的建议：

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>

【讨论】：

【解决方案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;

}

【讨论】：