两个连接的div具有不规则形状 - 带有文本的图像

Question

我希望在两个连接的div上重现这种形状。

Skewed divs

两个div都应该是倾斜的，但是里面的文本应该是正常的并且正好在元素的中间。

一个问题是，我找不到如何在不使用clip-path的情况下将它们与IE11的支持连接起来的方法。

我想让它支持IE11（因此剪辑路径不是一种方式）和响应。

这是我在codepen上的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何可以提供帮助的人我真的很感激！ 提前谢谢

Answer 1

你可以试试偏斜转换，因为它在IE11中得到了很好的支持：

IE11不支持

CSS变量，为简单起见我使用它们，你可以用普通的CSS替换它们

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;