<main>
  <section class="plank1">
  </section>
  <section class="plank2">
  </section>
</main>

/*Customization*/
.plank1{
  background-image: url('https://brash-ui.firebaseapp.com/img/volcano.jpeg');
  height: 400px;
  z-index: 1;
}
.plank2{
  background-image: url('https://brash-ui.firebaseapp.com/img/clouds.jpeg');
  height: 450px;
  z-index: 2;
}


body{padding:0; margin:0;}
*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

main{
	overflow: hidden;
	width:100%;
}

section {
	position: relative;
	padding: 0;
  margin:0;
  background-size: cover;
}

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

.plank2::before,
.plank2::after {
	top: 0;
	left: -5%;
	z-index: -1;
	width: 150%;
	height: 10px;
	background: white;
	transform: rotate(-1deg);
	transform-origin: 0 0;
}

.plank2::before {
	height: 20px;
	background: white;
	transform: rotate(-1deg);
  transform-origin: 15% 0;
}