<div class="banner">
<div class="front">
  <div class="top">
    <div class="text">
      BRYCE SNYDER
    </div><!--end text-->
  </div><!--end top-->
  <div class="bot">
    <div class="text">
      WEB CHAMPION
    </div><!--end text-->
  </div><!--end--bot-->
</div><!--end front-->
<div class="back">
  <div class="top">
  </div><!--end top-->
  <div class="mid">
  </div><!--end mid-->
  <div class="bot">
  </div><!--end--bot-->
</div><!--end back-->
</div><!--end banner-->

$front:#19B2C3;
$back:#148F9C;

body {
  font-family: helvetica;
}


.banner {
  height:200px;
  width:350px;
  margin:75px auto;
  .front {
    position:absolute;
    z-index:1;
    .top {
      height:50px;
      width:350px;
      background:$front;
      transform: skewY(10deg);
      -ms-transform: skewY(10deg); /* IE 9 */
      -webkit-transform: skewY(-10deg); /* Safari and Chrome */
    }
    .bot {
      height:50px;
      width:350px;
      background:$front;
  margin-top:42px;
      transform: skewY(10deg);
      -ms-transform: skewY(10deg); /* IE 9 */
      -webkit-transform: skewY(-10deg); /* Safari and Chrome */
    }
    .text {
      color:white;
      text-align:center;
      font-size:37px;
      margin-top: 7px;
      position: absolute;
      margin-left:30px;
    }
  }
  .back {
    position:absolute;
    z-index:0;
    .top {
      position:absolute;
      height:50px;
      width:175px;
      margin-top:-46px;
      margin-left:175px;
      background:$back;
      transform:skewY(10deg);
      -ms-transform:skewY(10deg); /* IE 9 */
      -webkit-transform:skewY(10deg); /* Safari and Chrome */
    }
    .top:before {
      content:"";
      display:block;
      position:absolute;
      margin-left:-25px;
      width:0; 
	    height:0; 
	    border-bottom:25px solid transparent;
	    border-right:25px solid $back;
    }
    .top:after {
      content:"";
      display:block;
      position:absolute;
      width:0; 
	    height:0;
      margin-top:25px;
      margin-left:-25px;
	    border-top:25px solid transparent;
	    border-right:25px solid $back;
    }
    .mid {
      height:50px;
      margin-top:46px;
      width:350px;
      background:$back;
      transform: skewY(10deg);
      -ms-transform: skewY(10deg); /* IE 9 */
      -webkit-transform: skewY(5deg); /* Safari and Chrome */
    }  
    .bot {
      height:50px;
      margin-top:42px;
      width:175px;
      background:$back;
      transform: skewY(10deg);
      -ms-transform: skewY(10deg); /* IE 9 */
      -webkit-transform: skewY(10deg); /* Safari and Chrome */
    }
    .bot:before {
      position:absolute;
      content:"";
      display:block;
      width:0; 
	    height:0;
      margin-left:175px;
	    border-bottom:25px solid transparent;
	    border-left:25px solid $back;
    }
    .bot:after {
      position:absolute;
      content:"";
      display:block;
      width:0; 
	    height:0;
      margin-top:25px;
      margin-left:175px;
	    border-top:25px solid transparent;
	    border-left:25px solid $back;
    }
  }
}

// No js required.