so I heard you liek ribbon

• Height:
• Width:
• Perspective:
• Perspective down:
• Left: Right:
• Color:
• Perspective color:

	el {
		display: block;
		position: relative;
		top: 40px;
		height: px;
		left: px;
		width: px;
		background: ;
	}
	
	el:before, el:after {
		content: '';
		display: block;
		position: absolute;
		border-style: solid;
	}
	
	el:before {
		display: ;
		left: 0;
		top: px;
		border-width: px;
		border-color: ;
	}
	
	el:after {
		display: ;
		right: 0;
		top: px;
		border-width: px;
		border-color: ;
	}
	

<div class="example">
	<div class="ribbon left"></div>
</div>

.ribbon.left {
	width: 66%;
}
	
.ribbon.left:after {
	display: none;
}

<div class="example">
	<div class="ribbon shadow"><div class="ribbon-shadow"></div></div>
</div>

.example {
	position: relative;
	z-index: 1;
}

.ribbon.shadow {
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .4), 0 0 20px rgba(0, 0, 0, .15) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .4), 0 0 20px rgba(0, 0, 0, .15) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4), 0 0 20px rgba(0, 0, 0, .15) inset;
}

.ribbon.shadow .ribbon-shadow {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	bottom: 0;
	left: 15px;
	-moz-border-radius: 666px / 20px;
	border-radius: 666px / 20px;
	-webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.6);
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.6);
	z-index: -1;
}