Fix IE/Edge CSS clip-path

Question

I'm having troubles with clip-path property with IE11/Edge browsers while using clip-path CSS property.

The snippet below is what I have so far and is working good in all browsers, apart Microsoft ones. I cannot understand how to solve this.

.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>

And a jsfiddle to help: JsFille

Answer 1

IE 11 only supports the CSS clip-path property 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 and target the css styles with no IE browsers:

@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.sstatic.net/NpNAO.jpg" style="width:100%" />
  </div>
</section>