END by Catt

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

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

body {
  background: $bg;
  font-family: $font;
}

.ribbon {
  background: $ribbon;
  display: inline-block;
  color: $bg;
  padding: $ribbonSize .7em;
  font-weight: 900;
  letter-spacing: .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%);
  }
  
}

styles

<link href="http://codepen.io/katydecorah/pen/5e3594c5f394b457f8b8ffbb4c5b6518?editors=0110" rel="stylesheet" />