Ribbon

Got it from css-tricks

by jshacker

HTML

<div class="ribbon-container">
  <h1 class="ribbon">
    <strong class="ribbon-content">Everybody loves ribbons</strong>
  </h1>
</div>

SCSS

$baseColor: #ba89b6;
$darkerBaseColor: $baseColor - #222222; /* #986794;*/
$textColor: #fff;
$baseFontSize: 10px;
$containerWidth: 600px;

.ribbon {
  text-transform: lowercase;
  font-size: baseFontSize !important;
  width: 50%;
  position: relative;
  background: $baseColor;
  color: $textColor;
  text-align: center;
  padding: .5em 2em;
  /* Adjust to suit */
  margin: 2em auto 3em;
  /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid $darkerBaseColor;
    z-index: -1;
  }
  &:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
  }
  &:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
  }

  & &-content:before,
  & &-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
  }
  & &-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
  }
  & &-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
  }

  &-container {
    width: $containerWidth;
    position: relative;
    z-index: 1;
  }
}