将对角边框添加到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; 
}

对于你的情况，你可以利用倾斜的线性渐变作为背景的。看看这个线程，它会帮助你 - 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>

将对角边框添加到div元素的底部/顶部？

相关推荐