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

3 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!

girija June 25, 2018 at 1:57 AM

Drawing trend lines is one of the few easy techniques that really WORK. Prices respect a trend line, or break through it resulting in a massive move. Drawing good trend lines is the MOST REWARDING skill.

The problem is, as you may have already experienced, too many false breakouts. You see trend lines everywhere, however not all trend lines should be considered. You have to distinguish between STRONG and WEAK trend lines.

One good guideline is that a strong trend line should have AT LEAST THREE touching points. Trend lines with more than four touching points are MONSTER trend lines and you should be always prepared for the massive breakout!

This sophisticated software automatically draws only the strongest trend lines and recognizes the most reliable chart patterns formed by trend lines...

==> http://www.forextrendy.com?kdhfhs93874

Chart patterns such as "Triangles, Flags and Wedges" are price formations that will provide you with consistent profits.

Before the age of computing power, the professionals used to analyze every single chart to search for chart patterns. This kind of analysis was very time consuming, but it was worth it. Now it's time to use powerful dedicated computers that will do the job for you:

==> http://www.forextrendy.com?kdhfhs93874

Post a Comment