/* From: http://www.inserthtml.com/2012/03/creating-css-image-ribbons/ */

.corner-ribbon {
 position: relative;
 display: inline-block;
 padding: 5px;
 padding: 1px;
 overflow: hidden;
}
 
.corner-ribbon p {
 display: inline; 
 color: #ddd;
}
 
.corner-ribbon p span {
 position: absolute;
 display: inline-block;
/*
 width: 100px;
 top: 22px;
 right: -20px;
*/
 width: 200px;
 top: 34px;
 right: -60px;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
 text-align: center;
 text-transform: uppercase;
 background: #d93131;
 background: rgb(124,45,35);
 padding: 6px 10px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
/*
 font-family: Arial, sans-serif;
*/
 font-weight: bold;
 font-size: 14px;
} 
 
.corner-ribbon p:before {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: -20px;
 right: 100px;
 z-index: -1;
 border: 17px solid;
 border-color: transparent transparent #662121 transparent;
}
 
.corner-ribbon p:after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: 110px;
 right: -10px;
 z-index: -1;
 border: 17px solid;
 border-color: #662121 transparent transparent transparent;
}