How to Draw a Star Shape Using CSS

Written by kevin foley
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Draw a Star Shape Using CSS
You can create a star shape with just a few lines of CSS code. (étoile à six branches image by dead_account from Fotolia.com)

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:
Easy

Other People Are Reading

Things you need

  • Plain text editor

Show MoreHide

Instructions

  1. 1

    Open an HTML document.

  2. 2

    In the <head></head> section of the HTML document, insert the following code:

    <style>

    </style>

  3. 3

    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:

    triangle-up {

    border-colour: transparent #000000 transparent;

    border-style: solid;

    border-width: 0px 40px 60px 40px;

    width: 0px;

    position: absolute;

    top: 0px;

    }

  4. 4

    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:

    triangle-down {

    border-colour: #000000 transparent transparent transparent;

    border-style: solid;

    border-width: 60px 40px 0px 40px;

    width: 0px;

    position: absolute;

    top: 35px;

    }

  5. 5

    Insert the following code In the <body></body> section of the HTML document:

    <div id="triangle-up">

    &nbsp;

    </div>

    <div id="triangle-down">

    &nbsp;

    </div>

  6. 6

    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.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.