.ribbon {
   position: absolute;
   right: -8px; top: -7px;
   z-index: 10000;
   overflow: hidden;
   width: 155px; height: 155px; 
   text-align: right;
}

.ribbon span {
   font-size: 25px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 40px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); /* Needed for Safari */
   width: 200px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 1);
   position: absolute;
   top: 38px; right: -41px;
}

.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}

.red_ribbon span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red_ribbon span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red_ribbon span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue_ribbon span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue_ribbon span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue_ribbon span::after {border-right-color: #1e5799; border-top-color: #1e5799;}