.box{width:300px;height:300px;position:relative;border:1px solid #bbb;background:#eee}.ribbonRed{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonRed span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;display:block;background:#79a70a;background:linear-gradient(#f70505 0,#8f0808 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbonRed span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #8f0808;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8f0808}.ribbonRed span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #8f0808;border-bottom:3px solid transparent;border-top:3px solid #8f0808}.ribbonBlue{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonBlue span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;display:block;background:#79a70a;background:linear-gradient(#2989d8 0,#1e5799 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbonBlue span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #1e5799;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbonBlue span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #1e5799;border-bottom:3px solid transparent;border-top:3px solid #1e5799}.ribbonGreen{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonGreen span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;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}.ribbonGreen 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}.ribbonGreen 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}.ribbonSilver{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonSilver span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;display:block;background:#79a70a;background:linear-gradient(#b6bac9 0,grey 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbonSilver span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid grey;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid grey}.ribbonSilver span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid grey;border-bottom:3px solid transparent;border-top:3px solid grey}.ribbonAqua{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonAqua span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;display:block;background:#79a70a;background:linear-gradient(#05eff7 0,#087f8f 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbonAqua span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #087f8f;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #087f8f}.ribbonAqua span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #087f8f;border-bottom:3px solid transparent;border-top:3px solid #087f8f}.ribbonOrange{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbonOrange span{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:95px;display:block;background:#79a70a;background:linear-gradient(#f79e05 0,#8f5408 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;right:-21px}.ribbonOrange span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #8f5408;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8f5408}.ribbonOrange span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #8f5408;border-bottom:3px solid transparent;border-top:3px solid #8f5408}