Internet Explorer and Clip-Path

Internet Explorer and clip-path

After more in depth research, when working with the image directly, IE supports clip as in rectangular shapes only but not clipPath complicated shapes.

My solution was to add the image to an SVG as below, and this time it works in both Chrome and IE9+.

Demo JsFiddle

body {  background-color: #e0e0e0;}
#image-wrapper {  position: relative;}
.svg-background,.svg-image {  clip-path: url(#clip-triangle);}
.svg-image {  -webkit-transition: all 0.5s ease 0.2s;  -moz-transition: all 0.5s ease 0.2s;  opacity: 1;  transition: all 0.5s ease 0.2s;}
svg.clip-svg {  height: 250px;  position: absolute;  width: 250px;}
#svg-1 {  left: 0px;  top: 0px;}

<div id="image-wrapper">  <svg id="svg-1" class="clip-svg">        <rect class='svg-background' width="300" height="300" fill="#ffffff" />        <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" />    </svg></div><svg id="svg-defs">    <defs>        <clipPath id="clip-triangle">            <polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/>        </clipPath>    </defs></svg>

Fix IE/Edge CSS clip-path

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.stack.imgur.com/NpNAO.jpg" style="width:100%" />  </div></section>

how to use CSS clip-path in IE?

Unfortunately, Clip Path is not supported in IE at all, as shown here.

You could search for a polyfill, however, I haven't found one of real note on a quick search.

If you truly want a mask over the image and have it working cross-browser, you'll have to put the mask on the image with an image editor.

CSS clip-path replacement for IE

In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.

Demo:

body {  background-color: gray;}
.card {  width: 80%;  height: 16.5rem;  border-radius: 5px;  background-color: #fff;  text-align: center;  padding: 0 1.5rem;  margin: 10rem auto;}
.card__inner-wrapper {  height: 55%;  position: relative;  margin: 0 auto;  display: flex;  justify-content: center;}
.card__img {  height: 100%;  position: absolute;  bottom: 50%;  border-radius: 50%; /* instead of clip-path */  background-color: #fff;  border: 0.8rem solid #fff;}
.card__text-content {  position: absolute;  top: 6rem;}
.card__heading {  font-size: 1.8rem;  font-weight: 500;  color: #5fc0c3;  margin-bottom: 1.5rem;}

<div class="card">  <div class="card__inner-wrapper">    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">    <div class="card__text-content">      <h4 class="card__heading">We help charities</h4>      <p>Share knowledge and working practice to make the best technology choices.</p>    </div>  </div></div>

---

Related Topics