vertical split-screen custom shape

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

score 1 · Answer 1 · answered Aug 04 '17 at 05:37

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

thanks for your trying. yes mine one similar too.. looking for proper solution with center content. your are small code than me which is good :) — pagol, Aug 04 '17 at 12:52

vertical split-screen custom shape

1 Answers1

Linked