css 剪辑路径替代答案

【问题标题】：css clip path alternativecss 剪辑路径替代
【发布时间】：2016-06-11 11:53:04
【问题描述】：

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

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

类似这样的：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);
}

&lt;div class="indexBanner"&gt;&lt;/div&gt;

但目前我使用的是 Firefox 和 IE 不支持的剪辑路径。而且你也可以看到“箭头形”的边框有点乱。

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

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

【问题讨论】：

您可以使用此答案中提到的skew 方法-stackoverflow.com/questions/30368404/…。我不明白您所说的“聊天气泡”效果是什么意思。也许如果你展示一个演示，我可以帮助微调它。 SVG 将是你最好的选择。
检查this
请注意，Firefox 已经支持 clip-path 并引用了 SVG <clipPath> 元素已有很长时间了，而基本形状如 polygon 已经支持了大约一年（无前缀）。它需要将about:config 中的layout.css.clip-path-shapes.enabled 标志设置为true 才能工作。

标签： html css transform css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

我已尝试更改箭头边框以使其看起来不那么凌乱。

https://jsfiddle.net/night11/b7ch05Ln/ - 更新

-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%);

【讨论】：

请检查您的链接。我猜这个 jfiddle 是为了另一个问题。
感谢您的关注 :)