CSS3 Pyramid

A Pyramid made using CSS3 borders

HTML

<body>
  <p class="shape four"><a href="#">asdasdasdasdasdasdas</a></p>
	<p class="shape three"><a href="#">asdasdasdasdasd</a></p>
	<p class="shape two"><a href="#">asdasdasdasd</a></p>
	<p class="shape one"><a href="#">asdasdasdasd</a></p>
</body>

CSS

body {
	background-color: #EFEFEF;
}
.shape {
	margin: 0 auto;
  text-align:center;
  position:relative;
}

.shape a{
  position:absolute;
  top: -50px;
  left: 50%; 
  transform: translate(-50%, 50%);
}

.shape:last-of-type a{
  top:-75px;
}

.one {
	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-top: 100px solid #9E9E9E;
}

.two {
	border-top: 75px solid #6CC9EA;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	height: 0;
	width: 150px;
}

.three {
	border-top: 75px solid #1DB259;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	height: 0;
	width: 260px;
}

.four{
	border-top: 75px solid red;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	height: 0;
	width: 370px;
  position:relative;
}