Thursday, August 8, 2013

How to draw lines using CSS

Do you want some simple lines (vertical, horizontal,diagonal or slanting) but without using images?

It is quite simple really. By using CSS, you can create the above listed lines as well as circle.

Let us start with the simpler ones, that is horizontal and vertical lines. To do so, simply create a div element and define the border on one side and you already have a line then define its position so you can place it at the exact location you wish the line be displayed by using a combination of the top, left, bottom, right properties together with the position: absolute, position: relative or position: fixed.

Vertical line example:
<style>
#vertical
{
 height: 200px;
 border-left: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="vertical"></div>

*You may also use border-right with the same values and it will have the exact same result. The bigger height it is the longer the vertical line.

Horizontal line example:
<style>
#horizontal
{
 width: 200px;
 border-top: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="horizonal"></div>

*You may also use border-bottom.

For a diagonal line first create a vertical or horizontal line then add the rotate property.

Diagonal line example:
<style>
#diagonal
{
 width: 200px;
 border-top: 1px solid blue;
 -webkit-transform: rotate(36deg);
 -moz-transform: rotate(36deg);
 -o-transform: rotate(36deg);
 -ms-transform: rotate(36deg);
 transform: rotate(36deg);
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="diagonal"></div>
*A diagonal line is a horizontal or vertical line that is rotated at an angle.
**The -webkit-transform: rotate(xxdeg), -moz-transform: rotate(xxdeg), -o-transform: rotate(xxdeg), -ms-transform: rotate(xxdeg) and transform: rotate(xxdeg) all do the same thing. But each only works for a specific browser.
***Always supply the same angle to all, otherwise it will be displayed differently on different browsers.

For a circle, it is still a div element with rounded corners.
Circle Example:
<style>
#circle
{
 height: 200px;
 width: 200px;
 border-radius: 100px;
 border: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="circle"></div>
*To create a circle, the div element has to be a square thus height and width must be equal.
**The value of the border-radius must be half that of the side (or half of the height or width value).

Now let us use a combination of these to draw a very big stickman.


<!DOCTYPE html>
<html>
<head>
<style>
#stick_head
{
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
top: 200;
left: 400px;
}

#body
{
height: 240px;
border-left: 1px solid blue;
position: absolute;
top: 120px;
left: 450px;
}

#left_arm
{
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
position: absolute;
top: 140px;
left: 400px;
}

#right_arm
{
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-o-transform: rotate(130deg);
-ms-transform: rotate(130deg);
transform: rotate(130deg);
position: absolute;
top: 140px;
left: 500px;
}

#left_leg
{
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
position: absolute;
top: 448px;
left: 345px;
}

#right_leg
{
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
position: absolute;
top: 448px;
left: 376px;
}
</style>
</head>
<body>
<div id="stick_head"></div>
<div id="body"></div>
<div id="left_arm"></div>
<div id="right_arm"></div>
<div id="left_leg"></div>
<div id="right_leg"></div>
</body>
</html>


Of course this is not how you would use a line to style your page but just to give you an idea as to what extent you can do with it and what has just been demonstrated is the very basic. There are more that you can do with it specially when used together with javascript or similar language.
Back to CyberLiving home page

Other Posts
Back to home page

2 comments

Dennis Miller November 14, 2013 at 8:47 PM

Good article i like your article
Website Development Company in Bangalore

Ervin vd Merwe March 5, 2014 at 4:25 AM

"horizonal" spelling mistake!

Post a Comment