向 div 元素的 bottom/top 添加对角线边框？

Question

我正在寻找将对角线边框添加到 div 元素底部的最佳方法。最好以某种方式进行响应。

这张图片是我希望它看起来如何的示例：

深色部分是我网站的 header，白色部分是内容开始的地方。所以对角线将起到分隔符的作用。

我做了一个小例子，但它还没有真正起作用：http://jsfiddle.net/ckknu2tr/

我使用了 2 个不同的带边框的 div，一个用于左侧，一个用于右侧，代码示例：

.borderright {
    line-height: 0%;
    width: 0;
    border-top: 50px solid transparent;
    border-right: 400px solid white;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

您可以为此使用 SVG。下面是一个简短的例子，可能可以简化，我很少使用 SVG，也不是很精通。

body {
  background-image: url(http://i.imgur.com/XxGffrU.jpg);
  background-size: cover;
  background-position: center bottom;
  margin: 0;
}
#your_div {
  position: relative;
  top: 100px;
  margin-top: 100px;
  width: 100%;
  height: 100px;
  background: white;
}
#back {
  position: relative;
  top: -99px;
  width: 100%;
  height: 100px;
}

<div id="your_div">
  <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
    <path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path>
    <path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path>
  </svg>
</div>

向 div 元素的 bottom/top 添加对角线边框？

Adding diagonal borders to bottom/top of div element?

html

css

css-shapes