Question

我一直在研究如何使用css做这个“逆三角”背景。我指的是底部的白色对角线部分，位于背景（固定）图像的顶部。

我得到的最多的是形状，这显然不是一个好的解决方案，因为它是针对响应式设计。只要没有水平滚动，我不在乎窗户是否较窄时只有一个对角线。但是形状和它的绝对宽度让人感到困惑。

如果这是一个愚蠢/常见/经常被问到的事情，我道歉。我无法找到它，很可能是由于缺乏技术术语。非常感谢你:)）

编辑：页面一直向下滚动！对角线/三角形下方有内容。三角形不是页面的底部。

enter image description here

Answer 1

这里有类似且反应灵敏的小提琴：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/

希望它有效！

Answer 2

您可以通过“背景图像”获得相同的效果。具有以下样式：

#bg{
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index:-1;
    -webkit-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -moz-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -ms-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
}

并在html中添加：

<img id = 'bg' src = 'path.jpg'> </img>

Answer 3

我建议使用html canvas和一个带有三角形剪辑区域的矩形或两个倒置的直角三角形位于底边。

这需要javascript。

除此之外，你可以使用这样的一些CSS技巧：http://jsfiddle.net/pgLP2/

这不是很优雅，因为它需要手动处理位置和尺寸。

HTML：

<div class="content">Some Content</div>
<div id="toptriangle"></div>

CSS：

body {
    color: white;
    background-color: #666666;
}

.content {
    text-align: center;
}

#toptriangle {
    position: relative;
    width: 0px;
    height: 0px;
    top: 100px;
    left: -10px;
    border-right: 500px solid white;
    border-top: 300px solid transparent;
    border-left: 500px solid white;
    border-bottom: 400px solid white;
}

你如何在CSS中设置三角形面具的样式？

3 个答案: