Исправить IE / Edge CSS клип-путь - PullRequest
Новая
       53

Исправить IE / Edge CSS клип-путь

1 голос
/ 13 февраля 2020

У меня проблемы со свойством clip-path в браузерах IE11 / Edge при использовании свойства clip-path 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

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

Ожидается, что он не будет работать на IE / Edge, поскольку clip-path не поддерживается ими, см. Более подробную информацию на Могу ли я использовать .

Вы можете проверить, если вы можете безопасно использовать css свойство / селектор в браузерах на сайте выше.

0 голосов
/ 14 февраля 2020

IE 11 поддерживает только свойство CSS clip-path в SVG . Сложно сделать то же самое в IE 11, как и в clip-path в других современных браузерах. Я думаю, что самый простой способ - использовать изображение в IE, оно должно совпадать с результатом применения стилей css в других браузерах. Я использую изображение вот так и нацеливаюсь на стили css без браузеров IE: 

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