Pure CSS Ribbon

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;
}


Related Snippets