index.html

<div class="ribbon">
  <span>LaDart</span>
</div>

ribbon-header-tilted.markdown

An Anonymous Pen

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Arvo:700);

html, body{
  height:100%;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
}
$green: #c74848;
$darker: darken(#c74848, 15%);
$darkest: darken($green, 25%);
.ribbon{
  background:#c74848;
  font-size:3em;
  padding:.5em 1em;
  position:relative;
  transform:skew(-8deg) rotate(-8deg);
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    border-width:1em .5em 1em .5em;
    border-style:solid;
    border-color: $darker $darker $darker transparent;
    height:0;
    width:0;
    top:.62em;
    left:-1em;
    z-index:-5;
  }
  &:after{
    left:100%;
    border-color: $darker transparent $darker $darker;
    top:-.35em;
  }
}

.ribbon span{
  position:relative;
  text-transform:uppercase;
  letter-spacing:3px;
  -webkit-text-stroke-width: 1px;
  text-shadow:-3px 3px 0px $darker;
  font-weight:bold;
  font-family:'Arvo';
   -webkit-text-stroke-color: #fff;
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    border-width:.2em .2em .2em .2em;
    border-style:solid;
    border-color: $darker $darker $darkest $darkest;
    right:-1em;
    top:-.85em;
  }
  &:after{
    left:-1em;
    top:1.73em;
    width:0;
    height:0;
    border-color: $darkest $darkest $darker $darker;
  }
}