<span>CSS Ribbon Product Badges</span>

<div class="ribbon  ribbon--red">SAVE 10%</div>
<div class="ribbon  ribbon--orange">SAVE 20%</div>
<div class="ribbon  ribbon--yellow">SAVE 30%</div>
<div class="ribbon  ribbon--green">SAVE 40%</div>
<div class="ribbon  ribbon--blue">SAVE 50%</div>
<div class="ribbon ribbon--purple">SAVE 60%</div>
<div class="ribbon">SAVE 70%</div>

@import compass

body
  background: #333333
  
  .wrap
    width: 100%
    margin: 0 auto
  
  span
    color: white
    font-weight: bold
    font-size: 2em
    text-shadow: 0 0 .5em rgba(0,0,0,.5)
    margin: .5em 0 0 .5em
    display: block

.ribbon
  line-height: .8em
  font-size: 2em
  text-transform: uppercase
  text-align: center
  font-weight: bold
  text-shadow: 1px 1px 5px rgba(0,0,0,.15)
  letter-spacing: -2px
  display: block
  width: 6rem
  height: 4rem
  background: linear-gradient(to bottom, #999999 0%,#CCCCCC 100%)
  color: white
  margin: 1em .5em 0
  float: left
  padding-top: 1rem
  position: relative
  -webkit-filter: drop-shadow(0 .5rem .3em rgba(0,0,0,.5))
  transform: translate3d(0, 0, 0) //what gives? filters make text blurry :(
  
  &:after
    content: ""
    width: 0
    height: 0
    border-right: 3rem solid transparent
    border-left: 3rem solid transparent
    border-top: 1.5rem solid #CCCCCC
    position: absolute
    top: 5rem
    left: 0
    
  &.ribbon--red
    background: linear-gradient(to bottom, #D3362D 0%,#E57368 100%)
      
    &:after
      border-top: 1.5rem solid #E57368
        
  &.ribbon--orange
    background: linear-gradient(to bottom, #E7711B 0%,#F7981D 100%)
      
    &:after
      border-top: 1.5rem solid #F7981D
        
  &.ribbon--yellow
    background: linear-gradient(to bottom, #F1CA3A 0%,#F6EB3B 100%)
      
    &:after
      border-top: 1.5rem solid #F6EB3B
        
  &.ribbon--green
    background: linear-gradient(to bottom, #5f9654 0%,#65b045 100%)
      
    &:after
      border-top: 1.5rem solid #65B045
    
  &.ribbon--blue
    background: linear-gradient(to bottom, #1C91C0 0%,#11A9CC 100%)
      
    &:after
      border-top: 1.5rem solid #11A9CC
        
  &.ribbon--purple
    background: linear-gradient(to bottom, #5C3292 0%,#7E3794 100%)
      
    &:after
      border-top: 1.5rem solid #7E3794