你如何在CSS中设计三角形面具？ [英] How do you style triangular mask in CSS?
问题描述
我一直在研究如何使用css来实现这个逆三角背景。我指的是背景（固定）图像底部的白色对角线部分。
我得到的最多的是形状，它不是'显然这是一个很好的解决方案，因为它是针对响应设计的。只要没有水平滚动，我不在乎窗口何时变窄只有一个对角线。但形状和它的绝对宽度混乱了。
如果这是一个愚蠢/常见/常被问到的事情，我很抱歉。我一直无法找到它，很可能是因为缺乏技术术语。非常感谢：）
编辑：页面不断滚动！对角线/三角形下面有内容。三角形不是页面的底部。
下面是一些类似和响应的小提琴： 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'）;
保证金：0;
padding：0;
}
＃triangle-1 {
width：0;
height：0;
border-bottom：30vw纯红色;
border-right：100vw solid transparent;
float：left;
}
＃triangle-2 {
width：0;
height：0;
border-bottom：30vw纯红色;
border-left：100vw solid transparent;
}
＃triangle-holder {
position：absolute;
bottom：0;
}
阅读这里的技巧： https://css-tricks.com/examples/ShapesOfCSS/
希望它的工作原理！
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 :)
EDIT: The page keeps scrolling down! There is content below the diagonals/triangles. The triangles are not the bottom of the page.
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;
}
Read about the technique here: https://css-tricks.com/examples/ShapesOfCSS/
Hope it works!
这篇关于你如何在CSS中设计三角形面具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
