Geometric CSS Tutorials

Circles and ovals
Triangles
Trapazoids
Articles about Geometric CSS

Drawing a circle box

Circling a link and callout with a circle box.

Use a 50% border-radius to draw the sides of the circle:

 
  circle-box {
  border-radius: 50%;
  -webkit-border: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #bb0000;
  height: 250px; 
  width: 250px; 
  margin: 1% auto; }

Drawing an oval box

Use similar CSS to a circle box but remove the width:

 
  circle-box {
  border-radius: 50%;
  -webkit-border: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #bb0000;
  height: 250px; 
  width: 175px; 
  margin: 1% auto; }

The oval will now stretch to fill the container it's in.

Drawing a tall oval box

Use similar CSS to a circle box but set the width to less than 250px:

 
  circle-box {
  border-radius: 50%;
  -webkit-border: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #bb0000;
  height: 250px; 
  margin: 1% auto; }

The oval will now stretch to fill the container it's in.

Drawing Triangles

More info coming soon...

This CSS creates a solid triangle from borders. Omitting a border-top gives the triangle a top point.

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

Drawing Trapazoids

More info coming soon...

  #trapezoid1 {
      border-bottom: 100px solid red;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }

Articles about Geometric CSS

The Shapes of CSS - from CSS Tricks