.ribbon{position:absolute;right:-5px;top:-5px;z-index:9;overflow:hidden;width:75px;height:75px;text-align:right}.ribbon span{font-size:10px;font-weight:bold;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;display:block;background:#79a70a;background:linear-gradient(#9bc90d 0%,#79a70a 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbon span::before{content:"";position:absolute;left:0;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-left:3px solid transparent;border-right:3px solid #79a70a;border-bottom:3px solid transparent;border-top:3px solid #79a70a}.ribbon.red span{background:linear-gradient(#f70505 0%,#8f0808 100%)}.ribbon.red span::before{border-left-color:#8f0808;border-top-color:#8f0808}.ribbon.red span::after{border-right-color:#8f0808;border-top-color:#8f0808}.ribbon.blue span{background:linear-gradient(#2989d8 0%,#1e5799 100%)}.ribbon.blue span::before{border-left-color:#1e5799;border-top-color:#1e5799}.ribbon.blue span::after{border-right-color:#1e5799;border-top-color:#1e5799}.ribbon.green span{background:linear-gradient(#9bc90d 0%,#79a70a 100%)}.ribbon.green span::before{border-left-color:#79a70a;border-top-color:#79a70a}.ribbon.green span::after{border-right-color:#79a70a;border-top-color:#79a70a}