How to Draw Various Shapes using CSS

All of the shapes below are drawn using CSS properties without using any images. These shapes may not render properly in Internet Explorer, so please use Firefox for viewing them properly.

Square

   1: #square {

   2:     width: 100px;

   3:     height: 100px;

   4:     background: red;

   5: }           

Rectangle

   1: #rectangle {

   2:     width: 200px;

   3:     height: 100px;

   4:     background: red;

   5: }

Circle

   1: #circle {

   2:     width: 100px;

   3:     height: 100px;

   4:     background: red;

   5:     -moz-border-radius: 50px;

   6:     -webkit-border-radius: 50px;

   7:     border-radius: 50px;

   8: }

Oval

   1: #oval {

   2:     width: 200px;

   3:     height: 100px;

   4:     background: red;

   5:     -moz-border-radius: 100px / 50px;

   6:     -webkit-border-radius: 100px / 50px;

   7:     border-radius: 100px / 50px;

   8: }

Triangle Up

   1: #triangle-up {

   2:     width: 0;

   3:     height: 0;

   4:     border-left: 50px solid transparent;

   5:     border-right: 50px solid transparent;

   6:     border-bottom: 100px solid red;

   7: }

Triangle Down

   1: #triangle-down {

   2:     width: 0;

   3:     height: 0;

   4:     border-left: 50px solid transparent;

   5:     border-right: 50px solid transparent;

   6:     border-top: 100px solid red;

   7: }        

Triangle Left

   1: #triangle-left {

   2:     width: 0;

   3:     height: 0;

   4:     border-top: 50px solid transparent;

   5:     border-right: 100px solid red;

   6:     border-bottom: 50px solid transparent;

   7: }

Triangle Right

   1: #triangle-right {

   2:     width: 0;

   3:     height: 0;

   4:     border-top: 50px solid transparent;

   5:     border-left: 100px solid red;

   6:     border-bottom: 50px solid transparent;

   7: }

Triangle Top Left

   1: #triangle-topleft {

   2:     width: 0;

   3:     height: 0;

   4:     border-top: 100px solid red; 

   5:     border-right: 100px solid transparent;            

   6: }

Triangle Top Right

   1: #triangle-topright {

   2:     width: 0;

   3:     height: 0;

   4:     border-top: 100px solid red; 

   5:     border-left: 100px solid transparent;

   6:     

   7: }

Triangle Bottom Left

   1: #triangle-bottomleft {

   2:     width: 0;

   3:     height: 0;

   4:     border-bottom: 100px solid red; 

   5:     border-right: 100px solid transparent;    

   6: }

Triangle Bottom Right

   1: #triangle-bottomright {

   2:     width: 0;

   3:     height: 0;

   4:     border-bottom: 100px solid red; 

   5:     border-left: 100px solid transparent;

   6: }

Parallelogram

   1: #parallelogram {

   2:     width: 150px;

   3:     height: 100px;

BlogThis!