<div class="container">
  
<div class="fore">
<div class="left ribbon">
  <div class="text">
    S<br>A<br>M<br>P<br>L<br>E
  </div><!--end text-->
  <div class="arrow-bottom">
  </div><!--end arrow-bottom-->
</div><!--end left-->
<div class="mid ribbon">
  <div class="text">
    T<br>E<br>X<br>T
  </div><!--end text-->
</div><!--end mid-->
<div class="right ribbon">
  <div class="arrow-top">
  </div><!--end arrow-top-->
  <div class="text">
      S<br>A<br>M<br>P<br>L<br>E
  </div><!--end text-->
</div><!--end right-->
</div><!--end fore-->

<div class="back">
  <div class="back-left">
  </div><!--end back-left-->
  <div class="back-right">
  </div><!--end back-right-->
</div><!--end back-->
  
</div><!--end container-->

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Graduate);
$ribbon:#F5675A;
$back:#B54C42;

body {
  background-color:#fff;
  font-family: 'Graduate', cursive;
}

.container {
  width:250px;
  margin:0 auto;
}

.fore {
  position:relative;
  z-index:2;
  height:450px;
  width:250px;
  margin-top:50px;
  
  .ribbon {
    height:200px;
    width:50px;
    background:$ribbon;
    float:left;
    margin-left:25px;
    -webkit-box-shadow:  0px 0px 3px 11px rgba(0, 0, 0, .5);
    box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, .4); 
    .text {
      color:#fff;
      font-size:2em;
      line-height:30px;
      text-align:center;
    }
  }
  
  .left {
    margin-top:225px;
    
    .text {
      margin-top:10px;
    }
    .arrow-bottom {
      width: 0; 
	    height: 0; 
	    border-left:35px solid transparent;
	    border-right:35px solid transparent;
	    border-top: 25px solid $ribbon;
      margin-left:-10px;
      margin-top:10px;
    }
  }
  
  .mid {
    margin-top:116px;
    .text {
      margin-top:40px;
    }
  }

  .right {
    margin-top:6px;
    .arrow-top {
      width:0; 
	    height:0; 
	    border-left:35px solid transparent;
	    border-right:35px solid transparent;
	    border-bottom:25px solid $ribbon;
      margin-top:-25px;
      margin-left:-10px;
    }
  }
}

.back {
  position:absolute;
  z-index:0;
  
  .back-left {
    margin-top:-212px;
    margin-left:75px;
    width:25px;
    height:65px;
    background:$back;
    transform: skewY(10deg);
    -ms-transform: skewY(10deg); /* IE 9 */
    -webkit-transform:skewY(45deg); /* Safari and Chrome */
  }
  
  .back-right {
    margin-top:-174px;
    margin-left:150px;
    width:25px;
    height:65px;
    background:$back;
    transform: skewY(10deg);
    -ms-transform: skewY(10deg); /* IE 9 */
    -webkit-transform:skewY(45deg); /* Safari and Chrome */
  }
}




  

/* NON OF THAT JS STUFF! */