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
Content
The 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.
Example :
.product-name:before {
content: "Product Name: ";
}
iphone 4
Result:
Product Name: iphone 4
Learn more about content property
- CSS Content – CSS-Tricks
- CSS Content – QuirksMode
- CSS Content Property – Reference Sitepoint
- CSS Content – dev.opera
- CSS Content Property
Border
This 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).
Example :
div {
height: 100px;
width: 100px;
}
.border {
border-width: 1px;
border-color: black;
border-style: solid
}
.singleLine-border {
border: 1px solid black;
}
Result:
Learn more about border property
- CSS Borders Properties – CSS Basics
- CSS Border Property – Reference Sitepoint
- Have Fun w/ Borders – Beveled, Pressed, & More!
Border-radius
Border-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;
- -moz (i.e -moz-border-radius) support firefox
- -webkit (i.e -moz-border-radius) support Safari & Google Chrome
Example :
div {
height: 100px;
width: 300px;
}
.rounded-corners {
border-radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
Result:
Learn more about border-radius property
- CSS3 Border-Radius & Rounded Corners
- Border-radius: create rounded corners with CSS!
- The hidden power of border-radius
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.
.square {
height: 200px;
width: 200px;
/* Now we can use any type of border.
we can define each value separately or combine,
well personally i prefer combine method */
border: 1px solid black;
background-color: red;
}
wow! we create a square. Next rounded corner square/rectangle.
CSS Tricks – Rounded corner square/rectangle:
Idea behind rounded corner square/rectangle is quite simple. just define height, width, border, background-color and border-radius property.
.round-corners {
/* well its a common sense that
if you want to create square your
height and width must be equal */
height: 200px;
width: 200px;
background-color: orange;
/* In this example i will show you
another way of styling border. */
border-width: 2px;
border-style: solid;
border-color: black; /* or hex color code #000000 */
/* Round the corners */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
CSS Tricks – Circle
To 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.
.circle {
height: 200px;
width: 200px;
background-color: #72b8c2;
border: 2px solid #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 – Triangle
Well, 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.
.triangle {
height: 0px;
width : 0px;
}
Now add 100px border with solid style in the recipe;
.triangle {
height: 0px;
width: 0px;
/* set border-width 100px and border-style solid.
Note: Don't use color yet.
*/
border:100px solid;
}
Now lets add border-color and take a look;
.triangle {
height: 0px;
width: 0px;
border:100px solid;
/* 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
/* top right bottom left */ border-color: red green yellow blue; OR border-color: brown; /* set all sides same color */
.triangle {
height: 0px;
width: 0px;
border:100px solid;
/* Add color now */
border-color: red green yellow blue;
}
Its not a triangle yet, so we simply transparent all other values except bottom.
.triangle {
height: 0px;
width: 0px;
border:100px solid;
border-color: transparent transparent #b54810 transparent;
}
Related Tutorials:
- How to Draw Speech Bubble and Shapes with CSS3
- Super Awesome Buttons with CSS3 and RGBA
- Depth And Nice 3D Ribbons Only Using CSS3
Pure examples of CSS Shapes & CSS Tricks:
