Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="main">
  <div class="ribbon--red">1</div>
  <div class="ribbon--green">2</div>
  <div class="ribbon--purple">3</div>
  <div class="ribbon--orange">4</div>
  <div class="ribbon--blue">50%</div>
  <div class="ribbon--gray">:)</div>
  <div class="ribbon--pink">!</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

/*
  A simple flat badge / ribbon module
  Create an instance and pass through values you
  wish to use instead of the defaults.
  
  The overlap on the top right of the badge is
  enabled by default, by passing the $overlap param
  with a value of false will disable it.
  
  The module allows you control over the dimensions, colors
  and fonts of the ribbon.
  
  Sassmeister url: http://sassmeister.com/gist/83ed0136965a8062c991
*/

// Crude reset

* {
  box-sizing: border-box;
  border: none;
  margin: 0;
  outline: none;
  padding: 0;
}

body {
  font-family: sans-serif;
  margin: 20px;
}

// Defaults

$ribbon--font-size: 1.5rem !default;
$ribbon--height: 2em !default;
$ribbon--width: 66px !default;
$ribbon--font-family: inherit;
$ribbon--bgcolor: red !default;
$ribbon--font-color: #fff !default;
$ribbon--padding: .5em .25em .4em !default;
$ribbon--line-height: 1 !default;
$ribbon--break-word: true !default;

$ribbon__overlap--darkness: 15% !default;
$ribbon__tip--depth: .7em !default;

// Placeholder(s)

%ribbon--base {
  text-align: center;
  display: inline-block;  
  position: relative;
  vertical-align: middle;  
  word-break: if($ribbon--break-word, break-all, initial);
}

%ribbon__pseudo--base {
  content: "";
  display: inline-block;  
  position: absolute;
}

%ribbon__overlap {
  border-left: .25em solid transparent;
  left: -.25em;
  top: 0;
}

%ribbon__tip {
  left: 0;
  top: 100%;  
}

// Mixin(s)

@mixin ribbon-overlap($bgcolor) {
  @extend %ribbon__overlap;
  @extend %ribbon__pseudo--base;
  border-bottom: .25em solid darken($bgcolor, $ribbon__overlap--darkness);  
}

@mixin ribbon-tip(
  $tip--depth: $ribbon__tip--depth, 
  $bgcolor: inherit,
  $width: null) {
  @if $width != null {
    @extend %ribbon__pseudo--base;
    @extend %ribbon__tip;
    border-top: $tip--depth solid $bgcolor;
    border-left: round($width / 2) solid transparent;
    border-right: round($width / 2) solid transparent;
    border-bottom: round($width / 3) solid transparent; 
  }
}

@mixin ribbon(
  $width: $ribbon--width,
  $color: $ribbon--font-color,
  $bgcolor: $ribbon--bgcolor,
  $font-size: $ribbon--font-size,
  $overlap: true) {
  @extend %ribbon--base;
  background-color: $bgcolor;
  color: $color; 
  font-size: $font-size;
  line-height: $ribbon--line-height;
  padding: $ribbon--padding;
  width: $width; 
  
  @if $overlap {
    &:before {
      @include ribbon-overlap($bgcolor);
    }
  }
  
  &:after {
    @include ribbon-tip($width: $width, $bgcolor: $bgcolor);
  }
}

// Instance(s)

.ribbon--red {
  @include ribbon;
}

.ribbon--green {
  @include ribbon($bgcolor: green);
}

.ribbon--purple {
  @include ribbon($bgcolor: purple);
}

.ribbon--orange {
  @include ribbon($bgcolor: orange);
}

.ribbon--blue {
  @include ribbon($bgcolor: blue);
}

.ribbon--gray {
  @include ribbon($bgcolor: gray);
}

.ribbon--pink {
  @include ribbon($bgcolor: hotpink);
}

// Layout

.main {
  [class^="ribbon"] {
    margin-right: .5em;
  }
}

SassMeister-output.css

/*
  A simple flat badge / ribbon module
  Create an instance and pass through values you
  wish to use instead of the defaults.
  
  The overlap on the top right of the badge is
  enabled by default, by passing the $overlap param
  with a value of false will disable it.
  
  The module allows you control over the dimensions, colors
  and fonts of the ribbon.
  
  Sassmeister url: http://sassmeister.com/gist/83ed0136965a8062c991
*/
* {
  box-sizing: border-box;
  border: none;
  margin: 0;
  outline: none;
  padding: 0;
}

body {
  font-family: sans-serif;
  margin: 20px;
}

.ribbon--red, .ribbon--green, .ribbon--purple, .ribbon--orange, .ribbon--blue, .ribbon--gray, .ribbon--pink {
  text-align: center;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.ribbon--red:before, .ribbon--red:after, .ribbon--green:before, .ribbon--green:after, .ribbon--purple:before, .ribbon--purple:after, .ribbon--orange:before, .ribbon--orange:after, .ribbon--blue:before, .ribbon--blue:after, .ribbon--gray:before, .ribbon--gray:after, .ribbon--pink:before, .ribbon--pink:after {
  content: "";
  display: inline-block;
  position: absolute;
}

.ribbon--red:before, .ribbon--green:before, .ribbon--purple:before, .ribbon--orange:before, .ribbon--blue:before, .ribbon--gray:before, .ribbon--pink:before {
  border-left: .25em solid transparent;
  border-right: .25em solid transparent;
  left: -.25em;
  top: 0;
  z-index: -1;
}

.ribbon--red:after, .ribbon--green:after, .ribbon--purple:after, .ribbon--orange:after, .ribbon--blue:after, .ribbon--gray:after, .ribbon--pink:after {
  left: 0;
  top: 100%;
}

.ribbon--red {
  background-color: red;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--red:before {
  border-bottom: 0.25em solid #b30000;
}
.ribbon--red:after {
  border-top: 0.7em solid red;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--green {
  background-color: green;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--green:before {
  border-bottom: 0.25em solid #003400;
}
.ribbon--green:after {
  border-top: 0.7em solid green;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--purple {
  background-color: purple;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--purple:before {
  border-bottom: 0.25em solid #340033;
}
.ribbon--purple:after {
  border-top: 0.7em solid purple;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--orange {
  background-color: orange;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--orange:before {
  border-bottom: 0.25em solid #b37300;
}
.ribbon--orange:after {
  border-top: 0.7em solid orange;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--blue {
  background-color: blue;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--blue:before {
  border-bottom: 0.25em solid #0000b3;
}
.ribbon--blue:after {
  border-top: 0.7em solid blue;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--gray {
  background-color: gray;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--gray:before {
  border-bottom: 0.25em solid #5a5a5a;
}
.ribbon--gray:after {
  border-top: 0.7em solid gray;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.ribbon--pink {
  background-color: hotpink;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5em 0.25em 0.4em;
  width: 66px;
}
.ribbon--pink:before {
  border-bottom: 0.25em solid #ff1c8e;
}
.ribbon--pink:after {
  border-top: 0.7em solid hotpink;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 22px solid transparent;
}

.main [class^="ribbon"] {
  margin-right: .5em;
}

SassMeister-rendered.html

<div class="main">
  <div class="ribbon--red">1</div>
  <div class="ribbon--green">2</div>
  <div class="ribbon--purple">3</div>
  <div class="ribbon--orange">4</div>
  <div class="ribbon--blue">50%</div>
  <div class="ribbon--gray">:)</div>
  <div class="ribbon--pink">!</div>
</div>