.ribbon{:contenteditable=>"true"} -end-

$bg: #f4f4f4;
$ribbon: #4b9ae5;
$tail: darken($ribbon, 5%);
$ribbonSize: 0.5em;
$fontSize: 2.5em;
$font: "Roboto", sans-serif;

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
  background: $bg;
  font-family: $font;
}

.ribbon {
  background: $ribbon;
  display: inline-block;
  color: $bg;
  padding: $ribbonSize 0.7em;
  font-weight: 900;
  letter-spacing: 0.2em;
  position: relative;
  font-size: $fontSize;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transform: rotate(-20deg) skew(-20deg, 10deg);

  &:before,
  &:after {
    content: "";
    width: 0;
    height: 2em;
    display: block;
    background: #4993da;
    position: absolute;
    border-style: solid;
    border-width: $ribbonSize;
    z-index: -1; // only necessary for flat (transform-style)
    transform: translateZ(-1em); // orders the ribbon tails
  }

  &:before {
    left: $ribbonSize * -1;
    top: $ribbonSize;
    border-color: $tail darken($tail, 10%) $tail $tail;
  }

  &:after {
    right: $ribbonSize * -1;
    top: $ribbonSize * -1;
    border-color: $tail $tail $tail darken($tail, 10%);
  }
}

/*
END by Catt http://drbl.in/jJIr. 

Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/
*/