html - css 剪辑路径替代方案

Question

我正在尝试为我的网站制作一个横幅，但有点不同。

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

类似这样的:JS FIDDLE

.indexBanner {
  background-image: url('/image/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>

但目前我使用的是clip-path，Firefox和IE不支持它。 而且你还可以看到“箭头形”边框有点乱。

我还尝试过 transform: skew 在这种情况下，结果更像是一种“聊天气泡”效果。

有什么办法可以做到这一点，因为我没有想法。

Answer 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;
}

<div class="indexBanner"> 
</div>