Creates a nice 3D ribbon effect with CSS only

_extensions.sass

=gradient-bg($color, $top: 5, $bottom: $top)
  @if $top < 0 and $bottom < 0
    $color1: darken($color, abs($top))
    $color2: lighten($color, abs($bottom))
    +linear-gradient(color-stops($color1, $color2))
  @else
    $color1: lighten($color, abs($top))
    $color2: darken($color, abs($bottom))
    +linear-gradient(color-stops($color1, $color2))
  background-color: $color

_ribbon.sass

/* Creates a nice 3D ribbon effect with CSS only
/* Assumes dark ribbon with light text. Tweak to suit.

@import compass
@import extensions

$ribbon-text: #fff
$ribbon-bg: #2b74c1
$ribbon-triangle: darken(desaturate($ribbon-bg, 25), 20)

/* If the element containing your ribbon has padding set it here. This example demonstrates outer padding like `padding: 0 25px`
$outer-padding: 25px

h1
  font-size: 1.8em
  margin: 0 (-$outer-padding - 13px) 15px
  padding: 15px
  @extend .ribbon-effect
  &:before
    @extend .ribbon-triangle
    border-width: 13px 13px 13px 0
    right: 0
  &:after
    @extend .ribbon-triangle
    border-width: 13px 0 13px 13px
    left: 0

.ribbon-effect
  +gradient-bg($ribbon-bg, 8)
  color: $ribbon-text
  +text-shadow(darken($ribbon-bg, 10))
  border-bottom: 1px solid darken($ribbon-bg, 12)
  border-top: 1px solid lighten($ribbon-bg, 15)
  position: relative
  text-align: center
  +box-shadow(rgba(0,0,0,.25), 0px, 3px, 8px)

.ribbon-triangle
  border-color: $ribbon-triangle transparent transparent
  content: "\00a0"
  height: 0
  width: 0
  z-index: -1
  position: absolute
  border-style: solid
  bottom: -26px