A CodePen by awesomephant. Sass Ribbon Generator. - A sass thing that adds a badge to elements with a data-badge attribute.

index.html

<header>
<h1 class='title'>Sass Ribbon Generator.</h1>
  <p class='tagline'>Fully customizable, variable font-size, uses the data-badge attribute + pseudo elements, comes with two awesome styles. Proudly presented by <a href='https://twitter.com/awesomephant'>@awesomephant</a></p>
</header>
<section class='demo'>
<figure class='product' data-badge='new'>
  <img src='http://www.lorempixel.com/600/700/technics/10'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>
  <figure class='product'>
  <img src='http://www.lorempixel.com/600/700/technics/1'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>
  <figure class='product' data-badge='left-5'>
  <img src='http://www.lorempixel.com/600/700/technics/4'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>

  <figure class='product' data-badge='left-2'>
  <img src='http://www.lorempixel.com/600/700/technics/5'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>

<figure class='product' data-badge='premium'>
  <img src='http://www.lorempixel.com/600/700/technics/2'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>
  <figure class='product'>
  <img src='http://www.lorempixel.com/600/700/technics/3'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>

<figure class='product' data-badge='sold'>
  <img src='http://www.lorempixel.com/600/700/technics/6'/>
  <figcaption>
    <h2>Some Cool Product</h2>
    <span class='description'>And some awesome description.</span>
  </figcaption>
</figure>
</section>
<section class='usage'>
<h1>Usage</h1>
<h2>HTML</h2>
  <code>
    <pre>
&lt;div data-badge='new'&gt;&lt;/div&gt;
    </pre>
  </code>
  <h2>SASS</h2>
  <code>
    <pre>
//Set background color:
$bg: rgb(240,240,240);

//Set the font size
$badge-font-size: 13px;

//Pick a style:
$style: flat; //use 'flat' or 'skeuomorph'

/Define your badges:
$badges: ('new', $blue, 'New!')
         ('sold', $red, 'Sold!')
         ('premium', $green, 'Premium');

 //That's it!
    </pre>
  </code>
</section>

style.scss

@import "compass";
//============================
//==General Settings==========
//============================
$red: rgb(235, 80, 66);
$blue: rgb(90, 120, 255);
$yellow: rgb(255, 255, 95);
$green: rgb(180, 255, 92);

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  box-sizing: border-box;}


/*
============================
====The Badge Magic=========
============================
*/

/*
Settings
========
*/

/*
Define your background color. 
(It is important that the product images, or whatever you want to put a badge on, sit on a flat colored background.)
*/
$bg: rgb(240,240,240);

/*Everything between 10 and 16px looks good.*/
$badge-font-size: 13px;

/*Pick a style:*/
$style: flat; //use 'flat' or 'skeuomorph'

/*
==Define your badges!==

1. Identifier. This is the name you use in your data-badge attributes in the HTML-

2. Color. The background color of the badge. Depending on how light that color is, the text will appear either in white or  a darkened version of the background color.

3. Text. The actual text that appears on the badge.

As an example, I defined 3 different badges:
*/
$badges: ('new', $blue, 'New!')
         ('sold', $red, 'Sold!')
         ('left-2', $yellow, '2 Left!')
         ('left-5', $yellow, '5 Left!')        
         ('premium', $green, 'Premium');


/*The Magic(tm)*/
[data-badge]{
  position: relative;
  &:before{
    content: 'text';
    font-size: $badge-font-size;
    padding-top: .4em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    display:block;
    width: 6.5em;
    position: absolute;
    height: 1.5em;
    top: .76em;
    left: -1.54em;
    @include transform2d(rotate(-45deg));  
  }
  &:after{
    content: '';
    background: transparent;
    border-left: 1em solid;
    border-top: 1em solid;
    border-color: $bg;
    display:block;
    width: 8em;
    position: absolute;
    height: 8em;
    top: -1em;
    left: -1em;
  }
}

@each $thing in $badges{
  [data-badge=#{nth($thing, 1)}]:before{
    content: nth($thing, 3);
    background: nth($thing, 2);
      @if lightness(nth($thing, 2)) < 68% {
        color: white;
      }
      @else{
        color: darken(nth($thing, 2), 40);
      }
      @if $style == skeuomorph {
          box-shadow: 0 -4px 0 0 rgba(darken(nth($thing,2), 6), .5) inset,  0 4px 0 0 rgba(darken(nth($thing,2), 6), .5) inset, 0 4px 3px -1px rgba(black, .4);
        background:        linear-gradient(135deg, darken(nth($thing, 2),5) 0%, darken(nth($thing, 2),5) 2%, transparent 34%),
          linear-gradient(-135deg, nth($thing,2) 0%, nth($thing,2) 18%,lighten(nth($thing,2), 20) 24%, nth($thing,2) 34%); 
      }

  }
}


/*Demo Code*/

@mixin bp($point) {
  @if $point == l {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == m {
    @media (min-width: 30em) { @content; }
  }
  @else if $point == s {
    @media (min-width: 25em) { @content; }
  }
}

body {
  background: $bg; 
}
.demo{
  @include column-count(1);
  @include column-gap(0);
  @include bp(m){@include column-count(2);}
  @include bp(l){@include column-count(4);}
}
.product{
  background: white;
  padding: 1em;
  z-index: 100;
  width: 95%;
  margin: 2%;
  font-family: sans-serif;
  display: inline-block;
  h2 {
    font-weight: bold;
    padding-top: 1em;
    color: rgb(40,40,40);
  }
  img {
    width: 100%;
  }
  .description {
    color: rgb(100,100,100);
  }
}

h1 {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 2em;
  margin-bottom: .2em;
}

header {
  margin-bottom: 2em;
  padding: 2em;
  font-family: sans-serif;
}

code {
  font-family: lucida console;
  font-size: .7em;
  background: darken($bg, 5);
  padding: 1em;
  display: block;
  margin-bottom: 2em;
}
.usage{
  padding: 1em;

h2 {
  font-family: sans-serif;
  font-size: 1.4em;
    margin-top: .5em;
}
}
a {
  text-decoration: none;
  color: $blue;
}