How to draw stars using only CSS
The current article is more for demonstration purposes. It shows how to draw six-pointed and five-pointed stars using only CSS.
All stars demonstrated in this article consist of simple elements - triangles. These triangles overlay each other and have the same colors which make them look like a single star.
Styles of each star shown here below are always applied to one div element.
Six-pointed star
This star consists of two triangles.
CSS code:
div { position: relative; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid green; } div:after { position: absolute; width: 0; height: 0; top: 50px; left: -75px; content: ""; border-left: 75px solid transparent; border-right: 75px solid transparent; border-top: 150px solid green; }
Live demo
To see the structure of the star, you need to change the color of the second triangle which overlays the first one.
Add the following styles to the styles above to change the color of the second triangle from green to red:
div:after { border-top-color: red; }
Live demo
Five-pointed star
Compared to the previous star, this one has only five points, but despite this fact this star consists of three triangles.
CSS code:
div { position: relative; display: block; margin: 72px 0; width: 0px; height: 0px; border-right: 120px solid transparent; border-bottom: 90px solid green; border-left: 120px solid transparent; -webkit-transform: rotate(37deg); -moz-transform: rotate(37deg); -ms-transform: rotate(37deg); -o-transform: rotate(37deg); transform: rotate(37deg); } div:before { position: absolute; display: block; width: 0; height: 0; top: -56px; left: -72px; content: ""; border-bottom: 84px solid green; border-left: 28px solid transparent; border-right: 28px solid transparent; -webkit-transform: rotate(323deg); -moz-transform: rotate(323deg); -ms-transform: rotate(323deg); -o-transform: rotate(323deg); transform: rotate(323deg); } div:after { position: absolute; display: block; width: 0px; height: 0px; top: 0; left: -120px; content: ""; border-right: 120px solid transparent; border-bottom: 90px solid green; border-left: 120px solid transparent; -webkit-transform: rotate(286deg); -moz-transform: rotate(286deg); -ms-transform: rotate(286deg); -o-transform: rotate(286deg); transform: rotate(286deg); }
Live demo
This time to see the structure of the star, you need to change the color of the second and third triangle which overlay each other.
Add the following styles to the styles above to change the color of the second and third triangle from green to yellow and red:
div:before { border-bottom-color: yellow; } div:after { border-bottom-color: red; }
Continue reading here: CSS3: semi-transparent background color using RGBA
Was this article helpful?
Readers' Questions
-
barbara1 month ago
- Reply
-
maximilian durr1 month ago
- Reply
-
Ashley4 months ago
- Reply
-
Tommi6 months ago
- Reply
-
Vincent9 months ago
- Reply
-
LODOVICO1 year ago
- Reply
-
ermenegildo1 year ago
- Reply
-
Odovacar1 year ago
- Reply