The Shapes of CSS: Rectangle

 

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

The Shapes of CSS: Circle

 

#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 */

The Shapes of CSS: Triangle Up

 

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

The Shapes of CSS: Triangle Down

 

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

The Shapes of CSS: Triangle Left

 

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

The Shapes of CSS: Triangle Right

 

#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

The Shapes of CSS: Triangle Top Left

 

#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }