背景CSS上的斜线

Question

我想创建这种设计：

如何创建斜角线水平？

现在我正在使用css / sass和Bootstrap设计。 我的出发点是： http://demo.themefisher.com/demos/?theme=vex

如您所见，他的构建是按级别分隔区域，我只是将此级别变为平行四边形而不是普通矩形

Answer 1

您可以使用渐变使用多种背景替换背景颜色：

.box {
  padding:50px 0;
  background:
   /* Triangle at the top width:100% height:50px*/
   linear-gradient(to bottom right,transparent 49%,orange 50%) top/100% 50px,
   /* Rectangle in the center filling the remaining space*/
   linear-gradient(orange,orange) center/100% calc(100% - 100px),
   /* Triangle at the bottom width:100% height:50px*/
   linear-gradient(to top left,transparent 49%,orange 50%) bottom/100% 50px;
  background-repeat:no-repeat;
}

<div class="box">
<h2>Designed By Professional , The Benefit For Creative Gigs</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia vel labore, deleniti minima nisi, velit atque quaerat impedit ea maxime sunt accusamus at obcaecati dolor iure iusto omnis quis eum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis commodi odit, illo, qui aliquam dol
</div>

Answer 2

div{
    width: 250px;
    height: 150px;
    background-color: #999;
    transform: skewY(-2deg);
    margin-left: 25px;
    }

<div>
</div>

---

这让您满意吗？