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

Works with one pseudo element that holds the text and another one that looks like a frame and covers the first one at the edges.

<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);

//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>