How to create a star with CSS step by step

In this post, you will learn how to create a star-shaped HTML element with pure CSS, without relying on images or other third-party libs.

Star Theory with CSS

First, there is a quick theoretical explanation of how to perform the technique.

Because better than a ctrl + c and ctrl + v is to understand the concept, at least this is my opinion 😀

Let’s first create an element that will have a shape of two legs of the star or points as you prefer.

Then we will create the top tip with the pseudo-element :before

Then we will create with :after a structure similar to the main HTML element of the star but in reverse.

And so we complete our CSS star!

Star with CSS in practice

So let’s start by creating our base HTML structure and also the first step of CSS, described above.

<!-- HTML -->
<div id="star"></div>

/* CSS */
#star {
   margin: 100px;
   position:relative;
   display: block;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #000;
   border-left: 100px solid transparent;
   transform: rotate(35deg);
}

So in this step, we create an element with relative position and display block, and the transparent edge techniques to create the star tips.

obs: the margin has the effect of taking off the element from the edges of the browser, it is not part of the star.

In addition, we rotate the element with rotate so that it is in the correct position, so we have this result:

Now we must add the CSS to make the top point of the star, which is the following code:

/* second part of the CSS code */
#star:before {
   border-bottom: 80px solid #000;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   transform: rotate(-35deg);
}

We then added the pseudo-element :before, so the top tip was created.

Note that again we use the transparent edge technique to create triangles.

And rotate serve to reset the angle created by the main element, otherwise, this triangle would be crooked.

See the result:

Our star is almost finished, we need to create the first part of the structure, only mirrored

We’ll do this with the :after pseudo-element, see:

/* rest of the CSS code */
#star:after {
   position: absolute;
   display: block;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #000;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: '';
}

Practically the same as the first part, only now with another rotate so we can rotate the pseudo-element in reverse

Also, some px in the top and left, for the correct positioning of it in the star shape

And then we have it finished, see:

Complete Star Code with CSS

For the anxious ones, the final code follows:

<!-- HTML -->
<div id="star"></div>

/* CSS */
#star {
   margin: 100px;
   position:relative;
   display: block;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #000;
   border-left: 100px solid transparent;
   transform: rotate(35deg);
}

#star:before {
   border-bottom: 80px solid #000;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   transform: rotate(-35deg);
}

#star:after {
   position: absolute;
   display: block;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #000;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: '';
}