vertical split-screen custom shape - html

Question

I want to make a vertical split-screen with a custom shape, like in my attached image But it must be cross browser supported. I tried with a clipping path, but that's not supported in FireFox, so I tried with CSS transform, but my background also transformed, which I don't want. Also, I want to know if the way I did it is the proper way or if there is a better way. Please suggest.
demo
https://jsfiddle.net/cyber007/8yyrv33q/ or
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">
ENTER </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">
ENTER </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

Taking a cue from your approach of using skew to make the shape, I thought about taking it a step further by skewing the parent and then inserting the image in a child with opposite skew to offset the image skew. So the image doesn't appear distorted.
Here is what I came up with. It seems to work pretty well on most screen sizes, but breaks on tall, narrow screens.
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">