在div元素的底部/顶部添加对角线边框？

Question

我正在寻找在div元素底部添加对角线边框的最佳方法。优选地，它也可以响应地工作。

此图片是我希望它的外观示例：

黑暗部分是我网站的标题，白色部分是内容的起始位置。所以对角线就像一个分隔符。

我做了一个小例子，但它还没有真正起作用：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而且不熟悉它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;