CSS Only 5-Point Star

Chris Coyier has a put up a nifty Shapes of CSS page. One shape I felt was missing was the 5 point star. This one is a little tricky because it requires CSS Rotations.

Click here to see the source in JS Bin.

Click here for a live preview (also JS Bin).

Here’s the code.

.star {
	position: relative;
	margin: 60px auto;
	display: block;
	color: red;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	border-left: 100px solid transparent;
	-moz-transform:rotate(35deg);
	-webkit-transform:rotate(35deg);
}
.star:before {
	border-bottom: 70px solid red;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	content: '';
	-moz-transform:rotate(-35deg);
	-webkit-transform:rotate(-35deg);
}
.star:after {
	position: absolute;
	display: block;
	color: red;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	border-left: 100px solid transparent;
	-moz-transform:rotate(-70deg);
	-webkit-transform:rotate(-70deg);
	content: '';
}