修复IE / Edge CSS剪切路径

Question

使用剪辑路径CSS属性时，IE11 / Edge浏览器的剪辑路径属性出现问题。

下面的代码段是我到目前为止所能使用的，并且在所有浏览器（微软除外）中都能正常工作。我不明白该如何解决。

.banner {
  overflow: visible;
  position: relative;
  min-height: 50vh;
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
  display: flex;
  background-image: url("https://i.picsum.photos/id/435/2000/800.jpg");
}

.banner-clickable {
  margin: 0;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: transparent;
  clip-path: polygon(0% 35%, 0% 75%, 100% 100%, 100% 0%);
}

.banner-clickable:hover {
  cursor:pointer;
}

.banner::after, .banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#ee3b26, #ee3b26);
  cursor: auto;
}

.banner::before {
  clip-path: polygon(0% 0%, 0% 35%, calc(100% + 1px) 0%);
}

.banner:after {
  clip-path:  polygon(0% 75%, 0% calc(100% + 1px), calc(100% + 1px) calc(100% + 1px));
  background: #fff
}

.banner > * {
  z-index: 100;
}

.banner {
  z-index: -1;
  min-height: 72vh;
}

<section class="banner">
  <div class="banner-clickable"></div>
  <div class="scrollBt">
    <a href="#content" class="scroll">LINK</a>
  </div>
</section>

还有一个帮助我们的jsfiddle：JsFille

Answer 1

由于它们不支持clip-path，因此预期无法在IE / Edge上使用，请参阅Can i use的更多详细信息。

您可以检查是否可以安全地在上述站点的浏览器中使用CSS属性/选择器。