I've recently written an article about creating various [CSS star] shapes. Basically, stars are made up of multiple triangles.
In this short post I will only discuss about creating a five pointed star in CSS, so check out my other article if you need more star shapes.
Star CSS Codepen
Essentially, we need to overlap three triangles. CSS triangles are created by combining colored and transparent borders.
If you're unfamiliar with how to create CSS triangle shapes, take a look at one of my previous tutorials.
As you can see in the CSS code, the three triangles are made up from the main element and 2 pseudo-elements, the :before or :after pseudo-elements.
CSS Star Configuration Options
You're probably wondering what's up with the property —star-color. It's not a common CSS property.
CSS variables are properties that begin with — (CSS double minus). Variable values can be defined in the same way that standard CSS properties are, and then reused in your CSS code. This has the advantage of only requiring you to modify the value once, and it will be applied everywhere the variable was used.
In our scenario, we have three triangles that are colored by the —star-color variable. So, this is where you may alter the color of the CSS star form.
In Conclusion
It's fun to create shapes using simple CSS. Though creating a CSS star might seem a challenge, you can see it's actually easy to do it, and you can do it with only one CSS class.
Latest comments (0)