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

Question

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

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

粉色区域是第一部分的结尾，灰色区域是下一部分的开始。 （我已经用 clip-path 实现了这些形状，但不幸的是它在 IE 中不起作用）。

也许有一些解决方案可以使用 jQuery 来强制 IE 中的剪辑路径？我愿意接受所有建议:)

谢谢帮助！

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 及更高版本中工作。我知道这不完全是您所追求的，但它似乎确实达到了相同的结果并且可能有用。