css 剪辑路径形状在 ie 上不起作用或者我如何使用 css 创建它

Question

我想根据形状裁剪图像，如下图所示。
但我的代码无法在 IE 中运行。
我怎样才能让它在 IE 中工作？

.svg-image {
  background: url(http://r-ce.com/wp-content/uploads/2016/01/Driving-Classes-Deal1-1.jpg);
  width: 320px;
  height: 320px;
}

.svg-image {
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0);
}

<div class="svg-image"><div>

View on CodePen

Answer 1

IE 不支持此功能。请参阅 CanIUse http://caniuse.com/#feat=css-clip-path 的链接。

此外，该线程虽然已有几年历史，但确实提供了使用 SVG 的可能解决方案。 clip-path svg polygon Internet explorer

还有一件事，如果您喜欢 photoshop 或 gimp，您可以剪切图像的该部分并将其设为具有透明背景的 png。那么您就不必担心在浏览器中执行此操作。不过，这是一个非常甜蜜的效果。