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

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

CSS, jQuery - forcing clip-path in IE

css

jquery

internet-explorer

clip-path