Making half a trapezoid like figure

Playing with CSS shapes.

HTML

<div class="headerimage">
  &nbsp;
</div>
<div id="backshape">
  <div class="wrapper">
    
  </div>
</div>

CSS

* {
  -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  margin:0;
}
.headerimage {
  background-color:#003a6f;
  height:600px;
  width:100%;
  background-size:cover;
  position:relative;
  z-index:-1;
}
#backshape .wrapper {
  display:block;
  float:left;
  margin:50px auto 200px;
  width:100%;
  padding:0 5%;
  transform:skew(0deg,-5deg);
-ms-transform:skew(0deg,-10deg);
-webkit-transform:skew(0deg,-5deg); 
}

#backshape {
  z-index:1;
  display:block;
  float:left;
  margin-top:-100px;
  width:100%;
  background:white;
  transform:skew(10deg,0deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform:skew(0deg,5deg); /* Safari and Chrome */
}
* {
  -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  margin:0;
}
.headerimage {
  background-color:#003a6f;
  height:600px;
  width:100%;
  background-size:cover;
  position:relative;
  z-index:-1;
}
#backshape .wrapper {
  display:block;
  float:right;
  margin:50px auto 200px;
  width:100%;
  padding:0 5%;
  transform:skew(0deg,-5deg);
-ms-transform:skew(0deg,-10deg);
-webkit-transform:skew(0deg,-5deg); 
}

#backshape {
  z-index:1;
  display:block;
  float:left;
  margin-top:-100px;
  width:100%;
  background:white;
  transform:skew(10deg,0deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform:skew(0deg,5deg); /* Safari and Chrome */
}
.footer {
  z-index:2;
  margin-top:-4em;
  position:relative;
  width:100%;
  display:block;
  float:left;
}
.footer .wrapper {
  height:150px;
  background:green;
}