垂直分屏自定义形状

Question

我想制作一个具有自定义形状的垂直分屏，就像我附加的图片 一样，但它必须支持跨浏览器。我尝试使用剪切路径，但 FireFox 不支持，所以我尝试使用 CSS transform，但我的背景也发生了变化，这是我不想要的。另外，我想知道我的做法是否正确，或者是否有更好的方法。请建议。

演示 https://jsfiddle.net/cyber007/8yyrv33q/ 或 https://codepen.io/pagol/pen/qXqZJM

HTML

<div class="section hpanel leftpan">
  <div class="background-img">
    <div class="content-area">
      <h2>What is Lorem Ipsum?</h2> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
      <div class="btn-area">
        <a href="#">ENTER</a> </div>
    </div>
  </div>
</div>
<div class="section hpanel rightpan">
  <div class="background-img">
    <div class="content-area">
      <h2>Why do we use it?</h2> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
      <div class="btn-area">
        <a href="#">ENTER</a> </div>
    </div>
  </div>
</div>

CSS

html {
    font-size: 62.5%;
}
.noscroll {
    overflow: hidden
}
body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #555555;
    overflow-x: hidden;
}
img {
    height: auto;
}
.hpanel {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff
}
.leftpan {
    left: -4%;
    width: 60%;
    -webkit-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -o-transform: skew(-8deg);
}
.leftpan .background-img {
    background-image: url(http://d1i3xayf43lpeg.cloudfront.net/58l7lmmaka1i/2jqTg1i70ce8G6yUyIi624/77fcf976d461fd96715da306b0afec34/cover.jpg);
}
.rightpan {
    right: -4%;
    width: 59%;
    -webkit-transform: skew(8deg);
    -moz-transform: skew(8deg);
    -o-transform: skew(8deg);
}
.rightpan .background-img {
    background-image: url(https://www.pixelo.net/wp-content/uploads/2017/07/02_free-duotone-photoshop-effects-pixelo.jpg);
}
.background-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}
.leftpan .content-area {
    -webkit-transform: skew(8deg);
    -moz-transform: skew(8deg);
    -o-transform: skew(8deg);

}
.rightpan .content-area {-webkit-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -o-transform: skew(-8deg);}
.content-area {
    text-align: center;
    margin: 20vh auto;
    width: 350px
}
.content-area h2 {
    font-size: 2.8rem;
    margin-bottom: 50px
}
.btn-area {
    margin-top: 50px
}
.btn-area a {
    padding: 13px 0;
    width: 70%;
    text-align: center;
    background-color: #fff;
    border-radius: 50px;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    color: #000;
    letter-spacing: 1px;
}

Answer 1

从您使用skew 制作形状的方法中得到启发，我想更进一步，通过倾斜父级然后将图像插入具有相反倾斜的子级以抵消图像倾斜。所以图像不会出现失真。

这是我想出的。它似乎在大多数屏幕尺寸上都能正常工作，但在又高又窄的屏幕上会中断。

html,
body {
  height: 100%;
  background-color: midnightblue;
  /*just to illustrate*/
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.left,
.right {
  width: 55%;
  height: 100%;
  top: 0;
  transform: skewX(-8deg);
  overflow: hidden;
}
.left {
  position: relative;
  left: -5%;
}
.right {
  position: absolute;
  right: -5%;
}
.left .inner,
.right .inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: skewX(8deg);
}
.left .inner {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/39/Panorama_Paris_December_2007-2.jpg");
  margin-left: 9%;
}
.right .inner {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/23/Hong_Kong_Skyline_Restitch_-_Dec_2007.jpg");
  margin-left: -9%;
}

<div class="wrapper">
  <div class="left">
    <div class="inner"></div>
  </div>
  <div class="right">
    <div class="inner"></div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">