Bootstrap行水平与度

Question

我这里有一个小网站，有一个学位的行（见图）

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

任何想法如何实现这样的效果？

谢谢。

Answer 1

您可以使用transform:rotate CSS属性实现此目的。见下面的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;