在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，也不太熟練。

 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>