Home | About Gladden | Wellness | Portfolio | Blog Posts

Geometric CSS Tutorials

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 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