垂直分屏自定义形状

Question

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

演示 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">