You can make a star shape with just a few lines of code in a Cascading Style Sheet (CSS), rather than using an image file to convey the shape on a Web page. CSS code loads faster than an image, which improves the website experience for your visitors. It's also very easy to change the colours and proportions of the shape when you use CSS, as it does not require image-editing software.
The six-sided star is the easiest star shape to create in CSS, as it is comprised of only two triangles.
- Skill level:
Other People Are Reading
Things you need
- Plain text editor
Open an HTML document.
In the <head></head> section of the HTML document, insert the following code:
Create an element called "triangle-up" inside the <style></style> section of the HTML document. Define the border properties, width and position of the element to create a triangle. For example, to create a triangle that's 80 pixels (px) wide and 60px tall, insert the following code:
border-colour: transparent #000000 transparent;
border-width: 0px 40px 60px 40px;
Create an element called "triangle-down" in the <style></style> section of the HTML document. This triangle should be a mirror image of the "triangle-up" element. The code will look like this:
border-colour: #000000 transparent transparent transparent;
border-width: 60px 40px 0px 40px;
Insert the following code In the <body></body> section of the HTML document:
Save your HTML document and open it in a browser to see the final result.
Tips and warnings
- You can change the colour and size of the star by altering the "border-color" and "border-size" properties, respectively, in the CSS code.
- Internet Explorer version 6, as well as all earlier versions, do not accept the transparent property.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for