html - 向 div 元素的底部/顶部添加对 Angular 边框？

Question

我正在寻找在 div 元素底部添加对 Angular 边框的最佳方法。最好以某种方式，这样它也能响应式地工作。

此图片是我希望其外观的示例:

黑色部分是我网站的标题，白色部分是内容开始的地方。所以对 Angular 线就像一个分隔符。

我做了一个小例子，但它还没有真正起作用: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>