@import url(https://fonts.googleapis.com/css?family=Podkova:400,700);

$fontColor: #FFF; $offWhite: rgba(255,255,255,.15);
$black: rgba(0,0,0,.3); $trans: transparent;
$default: #555; $b: #46ADF3; $r: #F33; $y: #ED2; $g: #6F6;

.ribbon {
  position: relative;
  height: 60px;
  padding: 0 75px; margin: 75px auto;
  border-radius: 3px 3px 0 0;
  background-color: $default;
  background-image: linear-gradient(90deg,$offWhite 0%,$trans 50%,$offWhite 100%);
  display: table;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  font-family: 'Podkova', serif;
  font-size: 25pt;
  color: $fontColor;
  font-weight: 700;
  line-height: 60px;
  text-shadow: 0 1px $black;
  font-smoothing: antialiased;
  &:before, &:after {
    content: '';
    position: absolute;
    bottom: -20px;
    width: 0; height: 0;
    border-width: 10px;
    border-style: solid;
  }
  &:before { left: 0; border-color: $black $black $trans $trans; }
  &:after { right: 0; border-color: $black $trans $trans $black; }
  .left {
    position: absolute;
    top: 20px; left: -40px;
    width: 60px; height: inherit;
    background-color: inherit;
    background-image: linear-gradient(90deg,$trans 0%,$black 100%);
    z-index: -1;
    i {
      content: '';
      position: absolute;
      top: 0; left: -10px; bottom: 0;
      width: 0; height: 0;
      margin: auto;
      border-width: 10px 10px 10px 0;
      border-style: solid;
      border-color: $trans $default $trans $trans;
    }
    i:first-child {
      left: -20px; bottom: auto;
      border-width: 10px;
      border-color: $default $default $trans $trans;
    }
    i:last-child {
      top: auto; left: -20px;
      border-width: 10px;
      border-color: $trans $default $default $trans;
    }
  }
  .right {
    position: absolute;
    top: 20px; right: -40px;
    width: 60px; height: inherit;
    background-color: inherit;
    background-image: linear-gradient(90deg,$black 0%,transparent 100%);
    z-index: -1;
    i {
      content: '';
      position: absolute;
      top: 0; right: -10px; bottom: 0;
      width: 0; height: 0;
      margin: auto;
      border-width: 10px 0 10px 10px;
      border-style: solid;
      border-color: $trans $trans $trans $default;
    }
    i:first-child {
      right: -20px; bottom: auto;
      border-width: 10px;
      border-color: $default $trans $trans $default;
    }
    i:last-child {
      top: auto; right: -20px;
      border-width: 10px;
      border-color: $trans $trans $default $default;
    }
  }
}

.b { background-color: $b; }
.r { background-color: $r; }
.y { background-color: $y; }
.g { background-color: $g; }