CSS3 Pyramid

A Pyramid made using CSS3 borders

by SpiceLab

HTML

<div class="shape one"></div>
<div class="shape two"></div>

CSS

body {
	background-color: #EFEFEF;
}
.shape {
	margin: auto;
}
.one {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 60px solid #9E9E9E;
}
.one:hover {
	border-bottom: 60px solid #CFCFCF;			
}
.two {
	border-bottom: 75px solid #6CC9EA;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	height: 0;
	width: 100px;
}
.two:hover {
	border-bottom: 75px solid #92DCF4;			
}