css剪辑路径替代

时间:2016-06-11 11:53:04

标签: html css css3 transform css-shapes

我正试图为我的网站做一个横幅,有点不同。

我想要底部边框,看起来像是“向下箭头”

像这样: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,在这种情况下,结果更像是一种“聊天泡泡”的效果。

有没有办法做到这一点,因为我完全没有想法。

3 个答案:

答案 0 :(得分:1)

https://jsfiddle.net/glebkema/h18w341m/

&#13;
&#13;
.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;
&#13;
&#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.