<div class="ribbon red"><a href="#">WHICH <span>MD PROGRAM</span><br />IS RIGHT FOR <span>YOU</span>?</a></div>
<div class="ribbon green"><a href="#"><span>EXPLORE</span> OUR<br />INNOVATIVE <span>CURRICULUM</span></a></div>
<div class="ribbon lime"><a href="#"><span>SUPPORT </span> MCOM NOW<br />MAKE A <span>GIFT</span></a></div>
@red: #b81d49;
@green: #149074;
@lime: #9dc845;

body {
  font: 14px "Arial";
  margin: 25px;
}

.ribbon {  
  color: #fff;
  display: inline-block;
  margin: 25px 0;
  position: relative;
  text-align: right;
  
  a {
    color: #fff;
    display: block;
    padding: 8px 18px;
    text-decoration: none;
  }
  
  span {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.75);
    &:first-child {
      &:before {
        border-color: transparent #000 #000 transparent;
        border-style: solid;
        border-width: 18px 6px 30px 10px;        
        content: "";
        left: -6px;
        position: absolute;
        top: 9px;
      }
    }
  }
  
  &:before {
    border-color: transparent transparent transparent #000;
    border-style: solid;
    border-width: 10px 0px 50px 10px;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
  }
  
  &:after {
    border-color: transparent #000 #000;
    border-style: solid;
    border-width: 30px 45px 15px 30px;
    bottom: -3px;
    content: "";
    position: absolute;
    right: 3px;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    z-index: -1;
  }
  
  &.red {
    background: @red;
    &:before {
      border-color: transparent transparent transparent darken(@red, 15%);
    }
    &:after {
      border-color: transparent darken(@red, 15%) darken(@red, 15%);
    }
    span:first-child:before {
      border-color: transparent lighten(@red, 10%) lighten(@red, 10%) transparent;
    }
  }
  &.green {
    background: @green;
    &:before {
      border-color: transparent transparent transparent darken(@green, 15%);
    }
    &:after {
      border-color: transparent darken(@green, 15%) darken(@green, 15%);
    }
    span:first-child:before {
      border-color: transparent lighten(@green, 10%) lighten(@green, 10%) transparent;
    }
  }
  &.lime {
    background: @lime;
    &:before {
      border-color: transparent transparent transparent darken(@lime, 15%);
    }
    &:after {
      border-color: transparent darken(@lime, 20%) darken(@lime, 20%);
    }
    span:first-child:before {
      border-color: transparent lighten(@lime, 10%) lighten(@lime, 10%) transparent;
    }
  }
  &:nth-of-type(2) {
    margin: 0 20px;
    text-align: left;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js