Css Shapes Drawing part 1

by muthu 2013-08-05 15:17:59

Square
1.jpg
#square { width: 100px; height: 100px; background: red; }

Rectangle
2.jpg
#rectangle { width: 200px; height: 100px; background: red; }

Circle
3.jpg
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */

Oval
4.jpg
#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } /* Cleaner, but slightly less support: use "50%" as value */

Triangle-up
5.jpg
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

Triangle-down
6.jpg
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

Triangle-left
7.jpg
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

Triangle-right
8.jpg
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

Triangle-topleft<font size=size></font>
9.jpg
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
832
like
0
dislike
0
mail
flag

You must LOGIN to add comments