A Pen by Katy DeCorah.

END-by-Catt.markdown

END by Catt

END by Catt http://drbl.in/jJIr. Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/

A Pen by Katy DeCorah on CodePen.

License.

index.haml

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

script.js

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

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

style.scss

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

body {
  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;
  @include transform-style(preserve-3d);
  @include transform(rotate(-20deg) skew(-20deg,10deg) translateZ(1em));
  &:before, &:after {
    content: "";
    width: 0;
    height: 1em;
    display: block;
    background: #4993da;
    position: absolute;
    border-style: solid;
    border-width: $ribbonSize;
    z-index:-1; // only necessary for flat (transform-style)
    @include 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%);
  }
}