ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Basic Shapes with CSS3

Updated on January 2, 2014

With the introduction of CSS3, creating different shapes and sizes has become a breeze. For example, adding rounded corners in CSS2 was tricky. We had to use different images for each corner. In CSS3, creating rounded corners is easy. The border-radius property is used to create rounded corners.

Step 0:

Lets start by making two files:

  • index.html
  • style.css

Now include style.css in the index.html page.

Step 1:

The box.

Index.html

<div id="shape"></div>

Style.css

#shape {
    height: 100px;
    width: 100px;
    background: red;
}

Explanation

The CSS is pretty self explanatory. We have declared the properties of shape id. The code outputs a square of height and width 100px and red background.

Step 2:

Now lets add borders to our square.

Style.css

#shape {
    height: 100px;
    width: 100px;
    background: red;
    border: 20px solid green;
}

Explanation

When we specify border property of an element, we get the specified border with the mentioned properties. Here our border is 20px thick, solid line and green in colour.

Step 3:

Lets see what happens when we specify different colours to different borders of the same element.

Style.css

#shape {
    height: 100px;
    width: 100px;
    background: red;
    border-top: 20px solid green;
    border-right: 20px solid green;
    border-bottom: 20px solid green;
    border-left: 20px solid yellow;
}

Explanation

When we specify different coloured borders of the same element, we get a photo frame type effect where each border becomes a trapezium and thus all the borders get symmetrically placed covering the element they're assigned to. Here we have changed the colour of the left border to yellow keeping the rest borders green.

Step 4:

Next, lets assign all different colours to different borders and decrease the size of the actual element.

Style.css

#shape {
    height: 10px;
    width: 10px;
    background: red;
    border-top: 20px solid green;
    border-right: 20px solid blue;
    border-bottom: 20px solid orange;
    border-left: 20px solid yellow;
}

Explanation

We get the above result after assigning different colours to different borders and reducing the height and width of our original square to 10px from 100px.

Step 5:

Guess what we get if we reduce the size of our original square to 0px and increase the border thickness.

Style.css

#shape {
    height: 0px;
    width: 0px;
    border-top: 50px solid green;
    border-right: 50px solid blue;
    border-bottom: 50px solid orange;
    border-left: 50px solid yellow;
}

Explanation

Pretty self explanatory. And we get a beautiful design.

Step 6:

Using the transparent attribute for top, left and right borders.

Style.css

#shape {
    height: 0px;
    width: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid orange;
    border-left: 50px solid transparent;
}

Explanation

After making the 3 specified borders transparent, we have our first triangle built with CSS3.

Pacman built with CSS3

#shape {
    height: 0px;
    width: 0px;
    border-top: 50px solid yellow;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
    border-left: 50px solid yellow;
    border-radius: 50%;
}

Hint

Try the above code yourself. Only an extra attribute, border-radius: 50% is used to make the entire element circular!

The purpose of using CSS3 for designing basic elements rather than using images of the same is to save bandwidth and loading time of the websites. Plus, by using CSS3 shapes with JavaScript we can make animations in websites which is not possible by using static images.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article