<section class="ruby">
  <div class="top"></div>
  <div class="bottom"></div>
</section>

@import "compass/css3";

body{
  background: #b2a3a3;
}

.ruby{
  width: 300px;
  margin: 0 auto;
  position: relative;
  .top{
    border-bottom: 50px solid #d5244b;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0px;
    width: 40px;
    margin: 0 auto;
    &:before{
      content: '';
      width: 90px;
      height: 50px;
      -webkit-transform: skew(-45deg);
      -moz-transform: skew(-45deg);
      -o-transform: skew(-45deg);
      background: #f04f5e;
      position: absolute;
      left: 16px;
    }
    &:after{
      content: '';
      width: 90px;
      height: 50px;
      -webkit-transform: skew(45deg);
      -moz-transform: skew(45deg);
      -o-transform: skew(45deg);
      background: #bb1948;
      position: absolute;
      left: 194px;
    }
  }
  .bottom{
    width: 0;
    height: 0;
    margin: 0px auto;
    border-top: 140px solid #f0564b;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    &:before{
      content: '';
      border-top: 140px solid #ee7d75;
      border-left: 78px solid transparent;
      border-right: 12px solid transparent;
      position: absolute;
      top: 50px;
      left: 32px;
      -webkit-transform:skew(30.2deg);
      -moz-transform: skew(30.2deg);
      -o-transform: skew(30.2deg);
    }
    &:after{
      content: '';
      border-top: 140px solid #d52f31;
      border-left: 78px solid transparent;
      border-right: 12px solid transparent;
      position: absolute;
      top: 50px;
      left: 145px;
      -webkit-transform: skew(-46.6deg);
      -moz-transform: skew(-46.6deg);
      -o-transform: skew(-46.6deg);
    }
  }
}