带度数的引导行水平

Question

我在这里有一个小网站，其中的行与度数有关（见图）

每一行都有不同的背景颜色等，但它们并不完全水平。每一行（或者说它的边界）都略微弯曲。

知道如何达到这样的效果吗？

谢谢。

Answer 1

您可以使用transform:rotate CSS 属性来实现此目的。请参阅下面的示例：

.text-content {
  text-align: left;
  color: #fff;
  transform: rotate(-3deg);
  padding: 50px;
}

.rotated-row {
  transform: rotate(3deg);
}

.orange-row {
  margin-top: 50px;
  background: #E5552A;
}
.blue-row {
  background: #1A99D5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row rotated-row orange-row">
  <div class="col-md-6">
    <div class="text-content">
      <h1>ABOUT</h1>
    </div>
  </div>
</div>

<div class="row rotated-row blue-row">
  <div class="col-md-3">
    <div class="text-content">
      <h1>SERVER</h1>
    </div>
  </div>
</div>