Para hacer un buen ribbon en CSStenemos que implementar la siguiente estructura:

<div class="ribbon">
     <div class="bottom-ribbon"></div>
</div>

y después añadirle los siguientes estilos:

div.ribbon{
     /*--Esta parte puede variar en función de 
     dónde querámos situar nuestro ribbon,
     pero lo que sí tenemos que definir es 
     un position: absolute o relative--*/
     position: absolute;
     right: .75em;
     top: 9em;
     /*--Medidas del ribbon, pero si las
     modificas debes modificar también
     los valores de border de la otra
     clase--*/
     height: 2.5em;
     width: 1.5em;
     overflow: hidden;
}
div.ribbon div.bottom-ribbon{
     /*--Define el color sobre el que va
     a ir el ribbon, en este caso es blanco--*/
     border-bottom: .75em solid #FFFFFF;
     border-left: .75em solid transparent;
     border-right: .75em solid transparent;
     height: 0;
     left: 50%;
     margin-left: -.75em;
     margin-top: -.35em;
     position: absolute;
     bottom: 0;
     width: 0;
}