How To Make Basic CSS3 Shapes ~ Designer's World

The Benefits of CSS3

Making square, diamond and circular shapes using only CSS3.

CSS3 has opened a lot of doors in the web development arena. It allows us to do alot of things that we would previously have needed images or JavaScript to do. Let me show you some examples of basic shapes.

Circle

This is the CSS for a simple circle.

Circle CSS

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

Oval

Let's turn the circle into an oval.

Oval CSS

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

Square

This is the CSS for a simple square.

Square CSS

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

Rectangle

Now let's stretch out that square a little.

Rectangle CSS

#rectangle {
   width: 140px; 
   height: 80px;
   background: green;
}

Parallelogram

Let's skew that rectangle a little bit.

Parallelogram CSS

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

Diamond

Finally, let's twist the square into a diamond.

Diamond CSS

#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%;
}

Designer's World