角度CSS分隔符

请看下图

---

我想通过CSS来实现这一点

我现在将此分隔符用作容器内响应的图像（jpg）。问题是我似乎无法精确匹配颜色，也无法使白色晶莹剔透

我认为CSS是解决这个问题的最好方法

尺寸为1170px 100px

使用Bootstrap3.2

<div class="container">
  <div class="row">
    <img class="img-responsive" src="img/separator.gif">
  </div>
</div>

---

解决方案1:带边框的vw装置：

（演示的学分为）

分隔符{
宽度：95vw；
保证金：0自动；
}
.separator:之前，.separator:之后{
内容：''；
显示：块；
}
.分隔符：之前{
左边框：95vw实心#DA7317；
边框底部：60px实心透明；
右边界：0；
边界顶部：0；
}
.分隔符：之后{
右边框：95vw solid#000；
边框顶部：50px实心透明；
左边框：0；
边界底部：0；
边缘顶部：-45px；
}

---

使用SVG:推荐使用

您可以使用SVG来创建形状。因为它是一个分隔符（这意味着它不会在形状中包含任何文本），所以它更像一个图像，SVG非常适合这种情况。SVG可以在不影响实际形状的情况下自动缩放，而且由于它是基于矢量的，因此在缩放时也不会像素化

我们可以使用SVG

path

或

polygons

创建此形状。下面是示例代码段

/*使用SVG路径*/

svg{
高度：100px；
宽度：1170px；
}
路径#顶部{
填充：rgb（218、115、23）；
}
路径#底部{
填充：rgb（42,42,42）；
}

您需要它作为背景还是内容分隔符？或者，如果您将此图像保存为.gif格式而不是.jpg格式，那么它看起来会更清晰？分享你的代码。几天前我尝试过类似的方法，但问题似乎是对角线的宽度从一端到另一端是不同的。我想，那个白色的分隔符也需要是另一个三角形（有点）。实际上，分隔符甚至不需要三角形。对边框宽度和边距进行轻微调整就足够了。是您原始答案的分叉版本。请随意使用。漂亮的接球@Harry，我没有注意到白线的厚度一直都不一样。Thx的演示：）谢谢大家。第二个演示（使用transform rotate）我将在今晚晚些时候试用，因为白色条看起来没有那么锯齿。如果我在容器内放置时遇到任何问题，将提供建议。再次感谢！