Drawing shapes with pure CSS3 code

dabblet.css

/**
 * Drawing shapes with pure CSS3 code
 */
 
body {
	background: url('http://tsironis.isnap.gr/images/stripes-1.png');
}

#title {
	text-align: center;
	font: 250%/1.5 Monaco,Consolas,Inconsolata,'Deja Vu Sans Mono','Droid Sans Mono','Andale Mono','Lucida Console',monospace;
	text-shadow: 0 2px 0px rgba(255,255,255,.9);
}
 
#shapes {
	margin: 0 auto;
	width: 600px;
}

.square {
	background: #000;
	color: #fff;
	text-align: center;
	font-family: 'Arial', sans-serif;
	font-size: 5em;
	line-height:1.25em;
	height: 100px;
	width: 100px;
	border: 4px solid #666;
	margin: .5em;
	float:left;
}

.circle {
	background: #000;
	height: 100px;
	width: 100px;
	color: #fff;
	text-align: center;
	font-family: 'Arial', sans-serif;
	font-size: 5em;
	line-height:1.25em;
	border: 4px solid #666;
	border-radius: 54px;
	margin: .5em;
	float:left;
}

.trapezoid{
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom:75px solid black; 
	    border-right:100px solid black;
	    float: left;
	    margin: 2.5em;
}

dabblet.html

<div id="title">
	Drawing shapes using only CSS... damn!
</div>

<div id="shapes">
	<div class="trapezoid"></div>
	<div class="square">S</div>
	<div class="circle">C</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}