將對角邊框添加到div元素的底部/頂部？

我正在尋找添加對角邊框到div元素底部的最佳方法。最好以這樣的方式來響應地工作。將對角邊框添加到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; 
}

來源

2015-08-15 colin

對於你的情況，你可以利用傾斜的線性漸變作爲背景的。看看這個線程，它會幫助你 - http://stackoverflow.com/questions/30317427/three-colors-angled-background-color/30317703#30317703 – Harry

你也可以看看這個線程（http： //stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive）爲各種方法來創建有反應的有角度的方面。它做了一半，而你不得不做另一面。 – Harry

@哈利謝謝你的回答！ – colin

你可以使用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>

來源

2015-08-15 10:30:21 Nit

將對角邊框添加到div元素的底部/頂部？

回答

相關問題