Home / Articles / Programming languages / Markup languages / HTML & CSS / How to draw stars using only CSS

How to draw stars using only CSS

How to draw stars using only CSS
 
How to draw stars using only CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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;
}
Solid six-pointed star

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;
}
Varicolored six-pointed star

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);
}
Solid five-pointed star

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;
}
Varicolored five-pointed star

Live demo


 

Read also

How to draw a heart using only CSS

How to draw a heart using only CSS

How to draw a diamond using only CSS

How to draw a diamond using only CSS

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation