Ribbon
<div class="ribbon-wrapper">
<div id="ribbon">
<span id="content">Ribbon</span>
</div>
</div>
.ribbon-wrapper {
width:100%;
height:100%;
text-align: center;
}
#ribbon {
padding: .34em 1em;
margin: 0;
margin-top: 5%;
position:relative;
color: #ffffff;
font: 32px 'Patua One', sans-serif;
text-align: center;
letter-spacing:0.1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 20px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.4);
background: -webkit-linear-gradient(top,#1eb2df, #17a7d2);
display: inline-block;
}
#ribbon:before, #ribbon:after {
content: "";
width:.2em;
bottom:-.5em;
position:absolute;
display:block;
border: .9em solid #1eb2df;
box-shadow:0px 1px 0px rgba(0,0,0,0.4);
z-index:-2;
}
#ribbon:before {
left:-1.35em;
border-right-width: .75em;
border-left-color:transparent;
}
#ribbon:after {
right:-1.35em;
border-left-width: .75em;
border-right-color:transparent;
}
#content:before, #content:after {
content:"";
bottom:-.5em;
position:absolute;
display:block;
border-style:solid;
border-color: #0675b3 transparent transparent transparent;
z-index:-1;
}
#content:before {
left: 0;
border-width: .5em 0 0 .5em;
}
#content:after {
right: 0;
border-width: .5em .5em 0 0;
}
