修复 IE/Edge CSS 剪辑路径

Question

我在 IE11/Edge 浏览器上使用剪辑路径属性时遇到问题，同时使用剪辑路径 CSS 属性.

下面的代码片段是我目前所拥有的，并且在所有浏览器中都运行良好，除了 Microsoft 的浏览器。我不明白如何解决这个问题。

.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

预计无法在 IE / Edge 上运行，因为 clip-path 不受它们支持，请参阅 Can i use 上的更多详细信息。

您可以检查是否可以在上述站点中跨浏览器安全地使用 css property/selector。

Answer 2

IE 11 仅支持 CSS clip-path 属性 in SVG. It's hard to make it exactly the same in IE 11 like using clip-path in other modern browsers. I think the easiest way is to use an image in IE, the image should be the same as the outcome of applying css styles in other browsers. I use a image like this 并针对没有 IE 浏览器的 css 样式：

@supports not (-ms-high-contrast: none) {
/* Non-IE styles here */
  #photo {
    display: none;
  }
  .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>
  <div id="photo" style="position:absolute; top:5px; left:5px; z-index:-999;">
    <img src="https://i.stack.imgur.com/NpNAO.jpg" style="width:100%" />
  </div>
</section>

修复 IE/Edge CSS 剪辑路径

Fix IE/Edge CSS clip-path

css

internet-explorer-11

microsoft-edge

clip-path