Technology Blog

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;
   4:     -webkit-transform: skew(20deg);
   5:        -moz-transform: skew(20deg);
   6:          -o-transform: skew(20deg);
   7:     background: red;
   8: }

Trapezoid

   1: #trapezoid {
   2:     border-bottom: 100px solid red;
   3:     border-left: 50px solid transparent;
   4:     border-right: 50px solid transparent;
   5:     height: 0;
   6:     width: 100px;
   7: }

Star (6-points)

   1: #star-six {
   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:     position: relative;
   8: }
   9: #star-six:after {
  10:     width: 0;
  11:     height: 0;
  12:     border-left: 50px solid transparent;
  13:     border-right: 50px solid transparent;
  14:     border-top: 100px solid red;
  15:     position: absolute;
  16:     content: "";
  17:     top: 30px;
  18:     left: -50px;
  19: }

Draw even more CSS Shapes, thanks to CSS Tricks.

Related: Remove Dotted Border from links using CSS

Tuesday, August 16, 2011 written by