http://www.css3shapes.com/

Triangles

CSS-Tricks explains how to create triangles.

.leftTriangle {
	width: 0;
	height: 0;
	border-right: 14px solid darkRed;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	display:inline-block; /* only necessary if you are placing on an in-line element like a <span> */
	margin-right:5px;
 }

Circles

Use border-radius half the width and height of the box. Example, the width and height are 40px. Use border-radius:20px

Rectangles

Nothing tricky here, just set a width and height on a box (any block element).

Ovals

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

Less common shapes

#trapezium {
 height: 0; 
 width: 80px;
 border-bottom: 80px solid blue;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 }

#diamond {
 width: 80px; 
 height: 80px; 
 background: purple;
 margin: 3px 0 0 30px;
 /* Rotate */
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 /* Rotate Origin */
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
 }

#parallelogram {
 width: 130px; 
 height: 75px;
 background: pink;
 
 /* Skew */
 -webkit-transform: skew(20deg); 
 -moz-transform: skew(20deg); 
 -o-transform: skew(20deg);
 transform: skew(20deg);
 }