.box{position:relative;border:1px solid #bbb;background:#eee}.ribbon{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right;pointer-events:none}.ribbon span{font-size:10px;font-weight:700;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,#79a70a);box-shadow:0 3px 10px -5px #000;position:absolute;top:19px;left:-21px}.ribbon span:before{left:0;border-left:3px solid #79a70a;border-right:3px solid transparent}.ribbon span:after,.ribbon span:before{content:"";position:absolute;top:100%;z-index:-1;border-bottom:3px solid transparent;border-top:3px solid #79a70a}.ribbon span:after{right:0;border-left:3px solid transparent;border-right:3px solid #79a70a}