Compass Ribbon Mixin

compass-flags.scss

@mixin ribbon($color, $ribbon-thickness, $notch-color, $notch-side) {
  @include background-image(linear-gradient(lighten($color, 20%), darken($color, 10%)));
  @include inline-block;
  position: absolute;
  padding-#{$notch-side}: $ribbon-thickness;
  @if $notch-side == left {
    height: $ribbon-thickness;
    line-height: $ribbon-thickness;
    right: -2px;
    padding-right: 10px;
    text-align: right;
  } @else if $notch-side == right {
    height: $ribbon-thickness;
    line-height: $ribbon-thickness;
    left: -2px;
    padding-left: 10px;
  } @else if $notch-side == bottom {
    text-align: center;
    width: $ribbon-thickness;
    top: -2px;
    padding-top: 10px;
  } @else {
    text-align: center;
    width: $ribbon-thickness;
    bottom: -2px;
    padding-bottom: 10px;
  }
  &:before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: $ribbon-thickness/2;
    border-color: transparent;
    border-#{$notch-side}-color: $notch-color;
    position: absolute;
    #{$notch-side}: -1px;
  }
}

// just an element to hold the ribbon

.box {
  @include border-radius(8px);
  @include box-shadow(0 2px 3px rgba(0,0,0,0.1));
  @include inline-block;
  width: 150px;
  height: 130px;
  background: #ebebeb;
  border: 1px solid #ccc;
  margin: 10px;
  position: relative;
}

// and then the ribbons...

.horiz-ribbon {
  @include ribbon(#548ec1, 40px, #ebebeb, right);
  @include box-shadow(0px 1px 1px rgba(0,0,0,0.35));
  top: 10px;
  color: #fff;
}

.vert-ribbon {
  @include ribbon(#911, 50px, #ebebeb, bottom);
  @include box-shadow(1px 0 1px rgba(0,0,0,0.35));
  left: 10px;
  color: #fff;  
}

flags.haml

.element
  %span.horiz-flag ribbon text
	
.element
  %span.vert-flag ribbon text

Below is a screenshot of the ribbons using different colors. You need to use compass and scss for this to work.

Params are in this order: ribbon color, ribbon thickness, parent element background color(color of css triangle border), the side the notch is on

You can see the html/css version here in a jsfiddle or the haml/scss version in a codepen