css 剪辑路径形状不适用于 ie 或者我如何使用 css 创建它

Posted 2023-03-06

【中文标题】css 剪辑路径形状不适用于 ie 或者我如何使用 css 创建它

【英文标题】：css clip path Shape is not working on ie or how can i create this with css

【发布时间】：2017-12-27 11:09:45

【问题描述】：

我想根据形状裁剪图像，如下图所示。 但我的代码在 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

【问题讨论】：

我的代码codepen.io/km_likhon/pen/zdOOLR

如果您在此处包含代码的重要部分，您更有可能得到答案。请参阅minimal reproducible example。

Internet Explorer and clip-path的可能重复

【参考方案1】：

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

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

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