альтернативы пути клипа для Internet Explorer / Edge - PullRequest
Новая
       19

альтернативы пути клипа для Internet Explorer / Edge

0 голосов
/ 20 января 2019

У меня есть проект, который использует пути клипов, чтобы визуализировать наклон во всем проекте. Масштаб проекта изменился, и теперь мне нужно поддерживать IE / Edge, которые не поддерживают пути клипов.

Существует общий повторяющийся элемент дизайна, в котором путь клипа применяется к обертке компонента изображения / текста и обрезает нижний правый угол (вы можете увидеть это во фрагменте ниже).

Я не уверен, как это сделать с помощью других средств, чтобы это работало в IE / Edge. Есть ли другой способ сделать это, который не требует от меня экспорта изображений с уже примененным уклоном? 

.image-text-wrapper {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
}
.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}
.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}
<div class="image-text-wrapper">
  <div class="image">
    <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
  </div>
  <div class="text">
    Content is here
  </div>
</div>

1 Ответ

0 голосов
/ 20 января 2019

Один простой способ, который поддерживается, но не делает прозрачной обрезанную часть, - это добавить наложение выше с той же формой, и вы сделаете его цвет таким же, как и фон.

Вот идея с линейным градиентом: 

.image-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
  position:relative;
}
.image-text-wrapper::before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:25%;
  background:linear-gradient(to bottom right,transparent 49.5%,#fff 50%);
}
.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}
img {
  display:block;
}
.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}
<div class="image-text-wrapper">
  <div class="image">
    <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
  </div>
  <div class="text">
    Content is here
  </div>
</div>

Еще одна идея с прозрачностью - рассмотреть косое преобразование, но вам нужно немного изменить HTML: 

.wrapper {
  display:inline-block;
  overflow:hidden;
}
.skew {
  display:inline-block;
  transform:skewY(-10deg);
  transform-origin:bottom left;
  overflow:hidden;
}
.skew > * {
  transform:skewY(10deg);
  transform-origin:bottom left;
}

.image-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 600px;
  background-color: aliceblue;
}

.image-text-wrapper .image {
  width: 50%;
  overflow: hidden;
}

img {
  display:block;
}

.image-text-wrapper .text {
  width: 50%;
  text-align: center;
}
body {
  background:pink;
}
<div class="wrapper">
  <div class="skew">
    <div class="image-text-wrapper">
      <div class="image">
        <img src="https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA4Mi8yMzEvb3JpZ2luYWwvbTMzLmpwZw==" />
      </div>
      <div class="text">
        Content is here
      </div>
    </div>
  </div>
</div>
...