我正试图为我的网站做一个横幅,有点不同。
我想要底部边框,看起来像是“向下箭头”
像这样:JS FIDDLE
.indexBanner {
background-image: url('https://i.stack.imgur.com/dFUnt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-color: #404040;
height: 500px;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}
<div class="indexBanner"></div>
但目前我使用的是剪辑路径,Firefox和IE不支持。 而且你也可以看到“箭形”边框有点乱。
我也试过transform: skew
,在这种情况下,结果更像是一种“聊天泡泡”的效果。
有没有办法做到这一点,因为我完全没有想法。
答案 0 :(得分:1)
https://jsfiddle.net/glebkema/h18w341m/
.indexBanner {
background-image: url('http://nauci.se/Flipo/assets/images/study.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-color: #404040;
height: 500px;
position: relative;
overflow-x: hidden;
}
.indexBanner:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 50vw solid white;
border-right: 50vw solid white;
border-top: 15vw solid transparent;
}
&#13;
<div class="indexBanner">
</div>
&#13;
答案 1 :(得分:0)
我尝试过改变箭头边框看起来不那么混乱。
https://jsfiddle.net/night11/b7ch05Ln/ - 已更新
-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%);
答案 2 :(得分:-3)
不要仅使用部分解决方案来过度复杂化。最好的方法是自IE 4.0以来一直支持的方式!只需使用带有多边形形状的区域标记,以及路径的坐标。 More info here.