Draw basic shapes – CSS3 tips and tricks

CSS tricks are very handy for any web designers. So, today I am going to discuss how to draw different shapes (i.e circles, triangles, rectangles, squares, speech bubbles and much more) using css3. In this article we will learn some basic properties of css to their advance level.

Most of us, are already familiar with many css tricks but drawing with css is beyond the limits for anyone, yet there are many designers and developers who are inspired with css and they design something extra ordinary.

Handy CSS tricks to design basic shapes

The creation of shapes are not difficult enough, if you have good concepts and ideas in your mind than you can build almost anything through css these days. These css tricks are bundle of codes and ideas, so its enough to talk, lets do it and learn something real.

Firstly we will discuss little bit about some css properties will be used in our examples and in real life.

These properties are as follow;

Content

Border

Border-radius

ContentThe content property introduced in CSS 2.1 long ago. But many of us are totally unaware of this property and its usage. Basically this property can only be used with the pseudo elements :after and :before. Although it looks like pseudo selector but it is not a pseudo selector because its not selecting anything. This property is actually used to enhance the functionality of the page.

BorderThis property was also introduced in the beginning of css and it is pretty amazing property. Basically border is a short form of multiple other properties of CSS (border-width, border-style and border-color).

Border-radiusBorder-radius introduced in css3 and its an amazing property which is use to round the corners according to your desire. With the help of this property we are able to create lots of shapes. This property really extended the css to another level.

Cross Browser Compatibility:Cross browser compatibility is a big problem but we can solve border-radius issue using prefix, which are given bellow;

lets start now! how can we enhance these CSS tricks to extend our vision. In this world anything is almost possible except control over death, lol. Okay lets start talking about how can we manipulate with these properties to create shapes.

Lets play with CSS tricks and draw shapes.So, lets start with square.CSS Tricks – Square shape:Idea behind square is very simple, just assume equal height and width, define border and also set the backgound-color to distinguish. lets try how it can be coded.

CSS Tricks – CircleTo create circle we don’t need any further codes, its also simple as rounded corners shape but we just need to round the corners until they look like circle. Use half value of width and height for border-radius to see the expected results.

1

2

3

4

5

6

7

8

9

10

11

12

13

.circle{

height:200px;

width:200px;

background-color:#72b8c2;

border:2pxsolid#234e5e;

/* In this case we use half of the

width and height as radius. */

border-radius:100px;

-moz-border-radius:100px;

-webkit-border-radius:100px;

}

CSS Tricks – TriangleWell, all of you now realize that every shape is starting from square shape, width and height. In this case we also start with square but this time we just play with border and border-color.

First of all we create a square (box) with 0px width and height.

1

2

3

4

.triangle{

height:0px;

width:0px;

}

Now add 100px border with solid style in the recipe;

1

2

3

4

5

6

7

8

.triangle{

height:0px;

width:0px;

/* set border-width 100px and border-style solid.

Note: Don't use color yet.

*/

border:100pxsolid;

}

Now lets add border-color and take a look;

1

2

3

4

5

6

7

.triangle{

height:0px;

width:0px;

border:100pxsolid;

/* Add color now */

border-color:#b54810;

}

huh! we are again watching a square, hmmmmmm,

Well border-color is a shorthand property which defines the 4 sides of border color. we can use it as

1

2

3

4

/* top right bottom left */

border-color:red green yellow blue;

OR

border-color:brown;/* set all sides same color */

1

2

3

4

5

6

7

.triangle{

height:0px;

width:0px;

border:100pxsolid;

/* Add color now */

border-color:red green yellow blue;

}

Its not a triangle yet, so we simply transparent all other values except bottom.