我一直在研究如何使用 css 来制作这个“逆三 Angular 形”背景。我指的是背景(固定)图像顶部底部的白色对 Angular 部分。
我得到的最多的是形状，这显然不是一个好的解决方案，因为它是用于响应式设计的。我不在乎当窗口变窄时是否只有一条对 Angular 线，只要没有水平滚动即可。但形状和它的绝对宽度搞乱了这一点。
如果这是一件愚蠢/常见/经常被问到的事情，我深表歉意。我一直没能找到它，很可能是由于缺乏技术术语。非常感谢:)
编辑:页面不断向下滚动!对 Angular 线/三 Angular 形下方有内容。三 Angular 形不是页面的底部。
最佳答案
这是类似且响应式的 fiddle :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 - 如何在 CSS 中设置三 Angular 形蒙版的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24023113/