.ribbon {width: 150px; height: 150px; overflow: hidden; position: absolute; z-index: 2;} 
.ribbon::before,
.ribbon::after {position: absolute; z-index: -1; content: ''; display: block; border: 4px solid #e09e04; }
.ribbon span {position: absolute; display: block; width: 212px; padding: 15px 0; background-color: #ffb300; box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font: 700 18px/1 'Arial', sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center;}/* 92 / = diagonale del box* / spessore della coccarda/

/* top left*/
.ribbon-top-left {top: -10px; left: -10px;}
.ribbon-top-left::before,.ribbon-top-left::after {border-top-color: transparent;border-left-color: transparent;}
.ribbon-top-left::before {top: 0; right: 0;}
.ribbon-top-left::after {bottom: 0; left: 0;}
.ribbon-top-left span {left: 0; bottom: 0; transform: rotate(-45deg); transform-origin: bottom left;}

/* top right*/
.ribbon-top-right {top: -10px;right: -10px;} /*-6 -6 / doppio del bordo coccarda*/
.ribbon-top-right::before,.ribbon-top-right::after {border-top-color: transparent;border-right-color: transparent;}
.ribbon-top-right::before {top: 0;left: 0;}
.ribbon-top-right::after {bottom: 0;right: 0;}
.ribbon-top-right span {right: 0;bottom: 0;transform: rotate(45deg);transform-origin: bottom right;}

/* bottom left*/
.ribbon-bottom-left {bottom: -10px;left: -10px;}
.ribbon-bottom-left::before,.ribbon-bottom-left::after {border-bottom-color: transparent;border-left-color: transparent;}
.ribbon-bottom-left::before {bottom: 0;right: 0;}
.ribbon-bottom-left::after {top: 0;left: 0;}
.ribbon-bottom-left span {left: 0;top: 0;transform: rotate(45deg); transform-origin: top left;}

/* bottom right*/
.ribbon-bottom-right {bottom: -10px;right: -10px;}
.ribbon-bottom-right::before,.ribbon-bottom-right::after {border-bottom-color: transparent;border-right-color: transparent;}
.ribbon-bottom-right::before {bottom: 0;left: 0;}
.ribbon-bottom-right::after {top: 0;right: 0;}
.ribbon-bottom-right span {right: 0;top: 0;transform: rotate(-45deg); transform-origin: top right;}

/* personalizzazione */
.ribbon.large {width: 150px; height: 150px;} /* DIMENSIONE BOX COCCARDA */
.ribbon.large span {width: 212px; padding: 15px 0;} /*LUNGHEZZA COCCARDA (1,41 x larghezza box), LARGHEZZA COCCARDA */

.ribbon.medium {width: 90px; height: 90px;} /* DIMENSIONE BOX COCCARDA */
.ribbon.medium span {width: 127px; padding: 10px 0; font-size: 0.95em;} /*LUNGHEZZA COCCARDA (1,41 x larghezza box), LARGHEZZA COCCARDA */

.ribbon.small {width: 60px; height: 60px;} /* DIMENSIONE BOX COCCARDA */
.ribbon.small span {width: 85px; padding: 7px 0; font-size: 0.90em;} /*LUNGHEZZA COCCARDA (1,41 x larghezza box), LARGHEZZA COCCARDA */

/* DISTACCO COCCARDA */
/*
.ribbon::before,.ribbon::after {border-width: 2px;} 
.ribbon-top-left {top: -6px; left: -6px;}
.ribbon-top-right {top: -6px;right: -6px;}
.ribbon-bottom-left {bottom: -6px;left: -6px;}
.ribbon-bottom-right {bottom: -6px;right: -6px;}
*/

.sideribbon {position: absolute;width: 50%;	top: 150px; padding: 5px 15px;font: 700 18px/1 'Arial', sans-serif;color: #fff;background-color: #ffb300;text-shadow: 0px 1px 2px #bbb;-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.4);	-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.4);	box-shadow: 0px 2px 4px rgba(0,0,0,.4);	z-index: 2;}
.sideribbon:after {content: ' ';position: absolute;	width: 0;height: 0;top: 100%;border-width: 3px 4px;border-style: solid;}
.sideribbon-left {left: -9px;}
.sideribbon-left:after {left: 0px;border-color: #e09e04 #e09e04 transparent transparent;}
.sideribbon-right {right: -9px;}
.sideribbon-right:after {right: 0px;border-color: #e09e04 transparent transparent #e09e04;}