<h1 class="ribbon-banner"><span>A Pure-CSS Ribbon Banner</span></h1>
@import "compass/css3";

$rear-x-offset: 1em;
$rear-y-offset: .35em;
$ribbon-color: gray;

.ribbon-banner {
  display: table; // allows for dynamic width and centered
  max-width: 85%; // might need to be adjusted if you make rear elements wider
  font-size: 24px;
  line-height: 1.1;
  position: relative;
  background: $ribbon-color;
  @include background(linear-gradient(
    left,
    lighten($ribbon-color, 7%),
    $ribbon-color,
    lighten($ribbon-color, 7%)
  ));
  color: #fff;
  text-align: center;
  padding: .3em 1em .3em;
  margin: .75em auto 1.25em; 
  text-shadow: 0 1px 3px darken($ribbon-color, 8%);
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -($rear-y-offset);
    border-width: .85em; // adjust according to height of parent
    border-style: solid;
    border-color: $ribbon-color;
    z-index: -1;
  }
  &:before {
    left: -($rear-x-offset);
    border-right-width: $rear-x-offset * 1.5;
    border-left-width: $rear-x-offset/2;
    border-left-color: transparent;
  }
  &:after {
    right: -($rear-x-offset);
    border-left-width: $rear-x-offset * 1.5;
    border-right-width: $rear-x-offset/2;
    border-right-color: transparent;
  }
  span:before,
  span:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: darken($ribbon-color, 12%) transparent transparent transparent;
    bottom: -$rear-y-offset;
  }
  span:before {
    left: 0;
    border-width: $rear-y-offset 0 0 $rear-x-offset;
  }
  span:after {
    right: 0;
    border-width: $rear-y-offset $rear-x-offset 0 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.