实现这一目标的背景（见图片）使用CSS [英] Achieve this background (see pic) with css
问题描述
我一直在寻找如何做到用css这种倒三角形的背景。我指的是在底部的白色斜部分，在背景上（固定）图像的顶部。
I have been looking at how to do this "inverse triangular" background using css. I am referring to the white diagonal parts on the bottom, on top of the background (fixed) image.
我已经得到的最多的是为形状，这是不明显铭记一个很好的解决方案，它是一个响应的设计。我不在乎，如果当窗口较窄，只有一个对角线，只要是没有水平滚动。但是形状和它的绝对宽度混乱，高达
The most I've gotten is to shapes, which aren't apparently a good solution having in mind that it is for a responsive design. I don't care if when the window is narrower there is just one diagonal, as long as there is no horizontal scroll. But shapes and its absolute width mess that up.
我道歉，如果这是一个愚蠢/普通/常问的事情。我一直没能找到它，很可能由于缺乏技术术语。非常感谢你：）
I apologize if this is a silly/common/often asked thing. I haven't been able to find it, most probably due to lack of technical term. Thank you very much :)
编辑：页面不断滚动下来！还有就是对角线/三角形下面的内容。三角形是不是页的底部。
The page keeps scrolling down! There is content below the diagonals/triangles. The triangles are not the bottom of the page.
推荐答案
下面是类似的，响应东西捣鼓： HTTP： //jsfiddle.net/BLbu5/
Here's the fiddle with something similar and responsive: http://jsfiddle.net/BLbu5/
HTML
<body>
<div id="triangle-holder">
<div id="triangle-1"></div>
<div id="triangle-2"></div>
</div>
</body>
CSS：
body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0;
}
#triangle-1 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-right: 100vw solid transparent;
float: left;
}
#triangle-2 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-left: 100vw solid transparent;
}
#triangle-holder {
position: absolute;
bottom: 0;
}
阅读这里的技术： https://css-tricks.com/examples/ShapesOfCSS/
希望工程！
这篇关于实现这一目标的背景（见图片）使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
