ribbon.sass

$flap_left = 1
$flap_right = 2

.ribbon-wrapper
  position: relative
  background-color: $etsy
  padding: 10px 30px 10px 55px
  margin-bottom: 10px
  border: 1px solid #ddd
=ribbon($color, $flap, $flaps=1,  $direction=$flap_left)
  z-index: 2
  font-weight: bold
  color: #fff
  background-color: $color
  padding: 5px 10px 5px 10px
  -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1)
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1)
  -o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1)
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1)
  @for $i from 1 through $flaps
    .flap-#{$i}
      position: absolute
      bottom: -10px
      @if $flaps==1
        @if $direction==$flap_left
          left: 0 
          background: url(/images/icons/flap-#{$flap}.png) 0 0
        @else
          right: 0
          background: url(/images/icons/flap-#{$flap}.png) 100% 0
      @else
        @if $i==1
          left: 0
          background: url(/images/icons/flap-#{$flap}.png) 0 0
        @else
          right: 0
          background: url(/images/icons/flap-#{$flap}.png) 100% 0
      width: 10px
      height: 10px

.ribbon-red
  +ribbon(#f43059, 'red')
  position: absolute
  top: 10px
  left: -10px

.ribbon-buy
  +ribbon(#3dabcf, 'blue', 1, $flap_right)
  +slab
  position: absolute
  width: 388px
  top: 22px
  left: 0px
  padding: 10px