Два связанных элемента с неправильной формой - изображения с текстом

Question

Я хочу воспроизвести этот вид фигур на обоих подключенных элементах.

Перекошенные деления

Оба div'а должны быть перекошены, но текст внутри должен быть нормальным и точно посередине элемента.

Единственная проблема в том, что я не могу найти способ, как вы можете соединить их с поддержкой IE11 без использования clip-path.

Я бы хотел сделать его поддерживаемым для IE11 (чтобы путь к клипам не выходил) и отзывчивым.

Это мой пример на codepen:

.hello {
  position: relative;
  width: 100%;

  > div {
    position: absolute;
    top: 0;
    width: 65%;
    height: 850px;
    display: flex;
    flex-direction: column;
  }

  .part1 {
    top: 150px;
    left: 0;
  }

  .part2 {
    right: 0;
    flex-direction: column-reverse;
  }

  a {
    color: #fff;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.5;
    margin: 2rem 0;
    text-transform: uppercase;
    text-align: center;
  }
}

<section class="hello">
      <div class="part1">
        <a href="#"><h2>text</h2></a>
            <svg viewbox="0 0 10 6.7">
              <defs>
                <clipPath id="clip1">
                  <polygon points="0 0, 10 -1, 4 10, 0 10" />
                </clipPath>
              </defs>
                <image xlink:href="https://images.pexels.com/photos/1042168/pexels-photo-1042168.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" x="0" y="0" height="6.7" width="10" clip-path="url(#clip1)"/>
            </svg>
        </div>
        <div class="part2">
          <a href="#"><h2>text</h2></a>
            <svg viewbox="0 0 10 6.7">
              <defs>
                <clipPath id="clip2">
                  <polygon points="6.5 0, 10 0, 10 10, 1.5 10" />
                </clipPath>
              </defs>
                <image xlink:href="https://images.pexels.com/photos/745407/pexels-photo-745407.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" x="0" y="0" height="6.7" width="10" clip-path="url(#clip2)"/>
            </svg>
        </div>
    </section>

Любой, кто может помочь, я действительно ценю! Заранее спасибо

Answer 1

Вы можете попробовать косое преобразование, поскольку оно хорошо поддерживается в IE11:

Переменные CSS не поддерживаются IE11, я использовал их для простоты, вы можете заменить их на обычный CSS

.box {
  margin: 50px;
  height: 200px;
  position: relative;
 overflow:hidden;
}
.box > div {
 content:"";
 position:absolute;
 overflow:hidden;
}
.box > div:before {
 content:"";
 top:-10%;
 right:-10%;
 left:-10%;
 bottom:-10%;
 position:absolute;
 transform:skew(20deg);
 background:var(--i) center/cover;
 
}
.box > div span {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  color:red;
  z-index:1;
  transform:skew(20deg);
}

.box > div:first-child {
  top:0;
  bottom:0;
  left:-20%;
  right:50%;
  transform:skew(-20deg) translate(0,25px);
}
.box > div:last-child {
  top:0;
  bottom:0;
  right:-20%;
  left:50%;
  transform:skew(-20deg) translate(0,-25px);
}

<div class="box">
  <div style="--i:url(https://lorempixel.com/500/500/)">
    <span>Text</span>
  </div>
  <div style="--i:url(https://lorempixel.com/600/600/)">
    <span>Text</span>
  </div>
</div>