How to Create Shapes in CSS3

By
Updated: August 22, 2013

CSS generated shapes are of great many use other than creating something cool for the websites to give them a different and bold look. They can be used in replacing big images in a web page which in turn helps in speeding up the web page loading time. Apart from that, it also helps the website in being more SEO-friendly as the actual text enables in rendering the keywords. Learn how to create Shapes in CSS3 with the help of the simple guidance that is given below helping you in creating some simple shapes.

How to Create Shapes in CSS3

Creating basic shapes with CSS is not that very difficult. One only needs to blend in some basic ideas and concepts in the mind with which they can create almost anything by CSS these days.

First, the users need to know the basic properties of CSS:

  • Content
  • Border
  • Border-radius

Content

This property was introduced a long time back. It can be used only with the pseudo elements: before and :after. Basically, this property is used so as to enhance the page’s functionality.

.product-name:before {

content: “Product Name: “;

}

iphone 4

Result:

Product Name: iPhone 4

Border

This is quite an amazing property. Border basically, is the short form of CSS’ multiple other properties such as border style, border colour and border width.

div {

height: 100px;

width: 100px;

}

.border {

border-width: 1px;

border-color: black;

border-style: solid

}

.singleLine-border {

border: 1px solid black;

}

Border Radius

This property is used in rounding off the corners. A number of shapes can be created by using this property. With this property, the CSS can be extended to a completely another level altogether.

Cross Browser Compatibility:

  • -moz (i.e -moz-border-radius) support firefox
  • -webkit (i.e -moz-border-radius) support Safari & Google Chrome

div {

height: 100px;

width: 300px;

}

.rounded-corners {

border-radius: 15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

}

Square

The idea behind the square shape is quite simple, just assuming equal width and height, defining the border and setting up the background colour so as to distinguish.

#square {

width: 100px;

height: 100px;

background: black;

}

Triangle:

#triangle {

width: 0px;

height: 0px;

border-style: solid;

border-width: 0 50px 50px50px;

border-color: transparent transparent black transparent;

}

Diamond:

#diamond {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom-color: black;

position: relative;

top: -50px;

}

#diamond:after {

content: ”;

position: absolute;

left: -50px;

top: 50px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top-color: black;

}

Rectangle:

#rectangle {

width: 200px;

height: 100px;

background: black;

}

Trapezoid:

#trapezoid {

width: 100px;

height: 0;

border-bottom: 100px solid black;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

Pentagon:

#pentagon {

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: black transparent;

}

#pentagon:before {

content: “”;

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent black;

}

Parallelogram:

#parallelogram {

width: 150px;

height: 100px;

background: black;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

}

Hexagon:

#hexagon {

width: 100px;

height: 55px;

background: black;

position: relative; }

 

#hexagon:before {

width: 0;

height: 0;

content: “”;

position: absolute;

top: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid black;

}

#hexagon:after {

width: 0;

height: 0;

content: “”;

position: absolute;

bottom: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid black;

}

Circle:

#circle {

width: 100px;

height: 100px;

background: black;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

Oval:

#oval {

width: 200px;

height: 100px;

background: black;

border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

}

Bookmark Ribbon:

#bookmarkRibbon{

width:0;

height:100px;

border-right:50px solid blue;

border-left:50px solid blue;

border-bottom:30px solid transparent;

}

Quarter Circle Top Left:

#quarterCircleTopLeft{

width:100px;

height:100px;

border:1px solid #000;

background: orange;

border-radius: 90px 0 0 0;

-moz-border-radius: 90px 0 0 0;

-webkit-border-radius: 90px 0 0 0;

}

Quarter Circle Top Right:

#quarterCircleTopLeft{

width:100px;

height:100px;

border:1px solid #000;

background: orange;

border-radius: 90px 0 0 0;

-moz-border-radius: 90px 0 0 0;

-webkit-border-radius: 90px 0 0 0;

}

Chart Top:

#chartTop{

width:0;

height:0;

border-right:60px solid purple;

border-top:60px solid transparent;

border-left:60px solid purple;

border-bottom:60px solid purple;

border-radius: 60px;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

}

Chart Bottom:

#chartBottom{

width:0;

height:0;

border-right:60px solid purple;

border-top:60px solid purple;

border-left:60px solid purple;

border-bottom:60px solid transparent;

border-radius: 60px;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

}

Half Circle:

#halfCircle{

height:45px;

width:90px;

border-radius: 90px 90px 0 0;

-moz-border-radius: 90px 90px 0 0;

-webkit-border-radius: 90px 90px 0 0;

background:green;

}

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + five =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>