Shapes of css by css zilla

Square

#square { width: 100px; height: 100px; background: red; }

Rectangle

#rectangle { width: 200px; height: 100px; background: red; }

circle

#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

oval

#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

Triangle Up

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

Triangle Top Left

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

Triangle Bottom Left

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

Notes

If you want to decrease or increase size of arrows simply increase their border size and see result. Ankit @ CSS Zilla