Diagonal Mask Background Image

by Marc Cots Navarro

HTML

<div class="div-one">
</div>

<div class="div-two" >
</div>

CSS

div {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.div-one {
  -webkit-clip-path: polygon(0 0, 0% 100vh, 100% 0);
  clip-path: polygon(0 0, 100vh 0, 100vw 0);
  background: url('http://i.imgur.com/8LgIL7B.jpg') center / cover no-repeat; 
}

.div-two {
  -webkit-clip-path: polygon(100vw 0, 0% 100%, 100vw 100vh);
  clip-path: polygon(100vw 0, 0% 100vh, 100vw 100vh);
  background: url('http://i.imgur.com/fBL4WC1.jpg') center / cover no-repeat; 
}

body {
  margin: 0;
}