Как сверстать такой элемент?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
body { 
  overflow-x: hidden; 
} 
header, 
section, 
footer { 
  min-height: 200px; 
  position: relative; 
} 
header { 
  background: url('http://www.bahai.org/chrome/img/beliefs/nature-feature-img.jpg?f0550045') no-repeat center top; 
  background-size: cover; 
} 
header:before, 
header:after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  z-index: 1; 
} 
header:before { 
  left: 0; 
  border-width: 50px 0 0 50vw; 
  border-color: transparent transparent transparent #ccc; 
} 
header:after { 
  right: 0; 
  border-width: 0 0 50px 50vw; 
  border-color: transparent transparent #ccc transparent; 
} 
section { 
  background: #ccc; 
} 
section:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-bottom-width: 0; 
  border-right-width: 50vw; 
  border-top-width: 50px; 
  border-left-width: 50vw; 
  border-color: #ccc transparent transparent transparent; 
  z-index: 1; 
} 
footer { 
  background: #FFE79F; 
}

<header></header> 
<section></section> 
<footer></footer>