CSS，jQuery - 在IE中强制剪辑路径

Question

我对剪辑路径没有什么问题（我知道IE不支持）。 我找到了一些剪辑路径图像的解决方案，但事实并非如此 - 我需要对整个部分进行处理。

但也许有其他解决方案？基本上我需要像这样的形状：

粉红色区域是第一部分的结尾，灰色区域是下一部分的开头。 （我已经用剪辑路径实现了这些形状，但不幸的是它在IE中无法工作）。

也许有一些解决方案使用jQuery强制IE中的剪辑路径？我对所有的吸烟都开放了：）

Thnx寻求帮助！

Answer 1

您无法真正强制浏览器使用它不支持的功能。但是，有可能以不同的方式重现你所追求的东西，使用几个div，大边框和变换。

.border {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden; /* hide borders */
}

.line {
  border-top: 500px solid #f6c; /* Fill top with pink */
  border-bottom: 500px solid #ccc; /* Fill bottom with grey */
  width: 1000px; /* Overflow the container so borders fill space */
  height: 10px; /* White line height */
  background-color: #fff;
  position: absolute;
  top: -350px; /* Border top height, minus position relative to border */
  left: -200px; /* hang off the edge so borders fill space */
  transform: rotate(-2deg); /* Rotate white line */
}

<div class="border">
    <div class="line"></div>
</div>

我们得到的效果类似于你想要的效果，它应该适用于IE9及以上版本。我知道这并不完全是你所追求的，但似乎确实达到了相同的结果，也许是有用的。