CSS Star

Making unconventional shapes with CSS is nothing new. CSS-Tricks has an entire page of interesting shapes from the infinity symbol to a yin-yang. Steve Dennis even recreated the infamous Twitter fail whale without images. In this post I will explain how to create a five pointed star using only one div and some CSS trickery.

First we need our basic building block - an isosceles triangle. The idea here is to start with a div with height and width zero and let the borders define the angles. See Stack Overflow: How does this CSS triangle shape work? for a detailed explanation of this phenomena.

Let's take a closer look at a star. There are many ways to break the star up into triangles. However, there is only one way to divide it using three identical triangles.

Here is the code for the first triangle

#triangle1{
 margin-top: 50px;
 position: relative;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
}

Since all three triangles are identical, except for the rotation, we can use CSS transforms to do the rotation. All that is left is to calculate the number of degrees each triangle should be rotated. Start by drawing a circle around the star so that the star only touches the circle at the points. Since we have 5 points equally spaced on the circle there are 72 degrees (360/5) for between each point. This is the number we are looking for. One triangle will be rotated 72 degrees and the other -72 degrees.

#triangle2{
 position: relative;
 left: -50px;
 top: -66px;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
 -webkit-transform: rotate(72deg);
 -moz-transform: rotate(72deg);
 -ms-transform: rotate(72deg);
 -o-transform: rotate(72deg);
}

#triangle3{
 position: relative;
 left: -50px;
 top: -33px;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
 -webkit-transform: rotate(-72deg);
 -moz-transform: rotate(-72deg);
 -ms-transform: rotate(-72deg);
 -o-transform: rotate(-72deg);
}

Awesome, we have a star. But there is one thing left. At the beginning I promised that only one div would be required and we used three. Enter, pseudo class selectors. Specifically, we will use :before and :after. Below is the final code.

#star{
 margin-top: 50px;
 position: relative;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
 z-index: 11;
}

#star:before{
 position: relative;
 left: -50px;
 top: -33px;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
 -webkit-transform: rotate(-72deg);
 -moz-transform: rotate(-72deg);
 -ms-transform: rotate(-72deg);
 -o-transform: rotate(-72deg);
 content: '';
}

#star:after{
 position: relative;
 left: -50px;
 top: -66px;
 display: block;
 color: #FFD700;
 width: 0px;
 height: 0px;
 border-right: 50px solid transparent;
 border-top: 33px  solid #FFD700;
 border-left: 50px solid transparent;
 -webkit-transform: rotate(72deg);
 -moz-transform: rotate(72deg);
 -ms-transform: rotate(72deg);
 -o-transform: rotate(72deg);
 content: '';
}

Now that you have seen how to combine shapes the possibilities are endless.