CSS3 Ribbons

I wrote this a long time ago and somewhere through my many redesigns it got a little bit lost off the main navigation. Looking back, this is a pretty solid solution but could certainly be improved upon by using the pseudo selectors and the content property. Worth a look either way.

The Markup:

<div id="bg">
    <h1>CSS Ribbons</h1>
</div>

<h2>Apparently, ribbons are 100% possible using only CSS 1 &amp; 2.</h2>

The CSS

div#bg {
	display: block;
	width: 500px; height: 175px;
	background-color: #e3e3e3;
	border: 1px solid #bcbcbc;
	margin: 0 auto;
	position: relative;
}

div#bg:before,
div#bg:after {
	padding: 0; margin: 0;
	height: 0px; width: 0px;
	position: absolute;
	content: "";
	border-style: solid;
	border-width: 25px;
	bottom: 29px; 
	z-index: -1;
}
div#bg:before {
	border-color: transparent #0d123e transparent transparent;
	left: -51px; 
}

div#bg:after {
	border-color: transparent transparent transparent #0d123e; 
	right: -51px;
}