<div class="view">
  <div class="left">
    <div class="sun"></div>
  </div>
  <div class="divider"></div>
  <div class="right">
    <div class="moon"></div>
  </div>
</div>

body {
  overflow:hidden;
}

.view {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:skew(-5deg);
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position:absolute;
  top:0;
}

.left { 
  left:-5%;  
  right:50%;  
}

.divider {
  background-color:#fc0;
  border-left:solid 2px #000;
  border-right:solid 2px #000;
  bottom:-5%;
  left:49.5%;
  position:absolute;
  right:49.5%;
  top:-5%;
  z-index:1;
}

.right {
  left:50%;
  right:-5%;
}

.sun,
.moon {
  bottom:-5%;
  left:-5%;
  position:absolute;
  right:-5%;
  top:-5%;
  transform:skew(5deg);
}

.sun {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
  background-position:center center;
  background-size:cover;
}

.moon {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
  background-position:center center;
  background-size:cover;
}