Brothersoft.comWindows|Mac|Mobile|Games

|Message

Solve software problem quickly Share experience to help others Improve the ability of solving problem
Tags:
How to Draw a Star Shape Using CSS

11/02/2011 05:46 by JohnEverard

First answer posted by lainib at 11/02/2011 05:46
Add Your Answer
10~1000 characters in length CAPTCHA:
3 Answers
  • lainib
    1. Open an HTML document.

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

      <style>

      </style>

    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-color: transparent transparent #000000 transparent;

      border-style: solid;

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

      width: 0px;

      position: absolute;

      top: 0px;

      }

    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-color: #000000 transparent transparent transparent;

      border-style: solid;

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

      width: 0px;

      position: absolute;

      top: 35px;

      }

    5. Insert the following code In the section of the HTML document:

       <div id="triangle-up">

      </div>

      <div id="triangle-down">

      </div>

    6. Save your HTML document and open it in a browser to see the final result.

  • Was this answer helpful? 00 · 11/02/2011 05:46
  • Anonymous user
  • <style>#triangle-up {

    border-color: transparent transparent #000000 transparent;

    border-style: solid;

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

    width: 0px;

    position: absolute;

    top: 0px;

    }

    #triangle-down {

    border-color: #000000 transparent transparent transparent;

    border-style: solid;

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

    width: 0px;

    position: absolute;

    top: 35px;

    }

    </style>

     

     <div id="triangle-up">

    </div>

    <div id="triangle-down">

    </div>

  • Was this answer helpful? 00 · 01/16/2012 08:23
  • Anonymous user
  • <style>#triangle-up {

    border-color: transparent transparent #000000 transparent;

    border-style: solid;

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

    width: 0px;

    position: absolute;

    top: 0px;

    }

    #triangle-down {

    border-color: #000000 transparent transparent transparent;

    border-style: solid;

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

    width: 0px;

    position: absolute;

    top: 35px;

    }

    </style>

     

     <div id="triangle-up">

    </div>

    <div id="triangle-down">

    </div>

  • Was this answer helpful? 00 · 01/16/2012 08:23
Add Your Answer
10~1000 characters in length CAPTCHA:
Related Questions
Q:How to Create a Star From the Corner Using Paint

A: Click on the star shape you prefer in the Shapes tool bar. Use the pull-down menus on the tool bar to select the type of outline and fill ...(more)

Q:How to Draw a Star With Microsoft Paint

A: Click on the Start button. Type "Paint" into the Start menu's search box. Click on the Paint icon when it appears in the Start menu. Click...(more)

Q:How to Create a Star Field in 3D Max

A: Start the 3DS Max application. Select "File" from the menu and choose "Open." Browse to and open a scene you want to add your star field to....(more)

Q:How to Put a Star on Your Keyboard

A: Open a Microsoft Word document by double-clicking on the icon on your desktop. Press down your "Alt" key and do not release it. Press "0...(more)

Q:How to Make a Star in Quark

A:Creating a Five-Point Star Open the Quark document within which you wish to create a star shape. Or, open a separate document and then drag ...(more)

0 people are following

Ask a question now
Write a title for your question

WampServer

WampServer is a Windows web development environment.
Latest version:2.1e
License:Freeware
OS:Windows Vista/XP/2000/98/Me/NT
Total downloads:119,868
Rank:5 in Databases
Download It

Share with friends

New features is coming

  • 1. Providing high-quality answers to be a verified Q&A expert
  • 2. Ask and answer questions to get Brothersoft credits

Added Successfully!

×

Are you sure to delete your answer?

NoYes

×

Are you sure to choose it as the best answer?

NoYes

×

Voted Successfully!

×

You can't vote for yourself

×

You can't choose your own answer

×