1

Just out of curiosity, is it possible to draw a vertical line in html? The below image is a general look of what i'm trying to do.

I've succeeded on doing the horizontal line using the <hr> tag by setting the position to position:relative and z-index: -9999 to make it go behind the colored boxes.

(The colored boxes here represent different images. Sorry for the terrible drawing) but when I try to apply

<hr style="position: relative; width:0px; height:50px; top: 100px;">

the other horizontal lines that I've created earlier aren't placed the same as before. But I am using the similar style for both horizontal and vertical lines. Any idea on how or why this happens? Or is it just impossible to do?

Thanks in advance!

Nurul Shh
  • 37
  • 1
  • 2
  • 9
  • 1
    possible duplicate of [How to make a vertical line in HTML](http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html) – Andrei Maieras Aug 03 '15 at 07:28
  • @Andrei Maieras I've tried these methods but they're mostly about drawing vertical lines on its own without the vertical line going behind the image. Do you think it is possible to do? Thanks! – Nurul Shh Aug 03 '15 at 07:31
  • Why not? use the vertical line from link in my first comment, or Javi Prieto's comment and add some style to put it wherever you want, just like you did with `
    `     – Andrei Maieras Aug 03 '15 at 07:43

5 Answers5

6

Depending on your needs, you might find the css3 transform:rotate a good option: 

.vertical {
    transform: rotate(90deg);
}

check some example below: http://codepen.io/anon/pen/vOvraM

Javi Prieto
  • 429
  • 3
  • 14
  • Thank you for the suggestion @Javi Prieto. I've tried this method in the codepen but the vertical line is always in the middle, cannot seem to reposition it. – Nurul Shh Aug 03 '15 at 07:52
5
<div class="test"></div>

Sample Div i created set height how much u need

.test{height:100px; width:0px; position:relative; border-left:1px solid gray;}

This will work

Srikanth Pullela
  • 241
  • 1
  • 12
  • thank you @Srikanth Pullela! I think this is the best solution for me. I've always thought of using `
    ` tag without considering `
    ` So silly of me. Anyway thanks! :)
     – Nurul Shh Aug 03 '15 at 08:04
3

You can try this also

<hr width="1" size="500">

Demo here

OR

.vertical
{
   width: 1px;
   height: 100%; 
}

Demo here

Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
  • thank you for the jsfiddle. @Srinivas Pai Just a short question, how come when I add some styling, the vertical line is always in the middle? My css, `.verti{ position:fixed; top:20px; left:-90px; }` – Nurul Shh Aug 03 '15 at 08:02
  • 1
    Based on requirement you can style. suppose you want it on left use this position: relative; float:left; for right use float:right; – Shrinivas Pai Aug 03 '15 at 08:05
  • 2
    `position:fixed` and `position:static` does not support left,right,top, bottom. You can use either `position:relative` or `position-absolute` or with fixed or static add some margin – Andrei Maieras Aug 03 '15 at 08:08
  • @Srinivas Pai I totally get it now! Thank you very much *thumbs up – Nurul Shh Aug 03 '15 at 08:09
2

ya it is possible with the canvas;

<div id="myCanvas" width="200" height="100">

</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(200,0);
ctx.lineTo(200,400);
ctx.stroke();
</script>
Ujjwal Kumar Gupta
  • 2,308
  • 1
  • 21
  • 32
  • canvas? It's my first time hearing canvas. Could you please elaborate more? or provide some helpful link? Thank you @Ujjwal Kumar Gupta :) – Nurul Shh Aug 03 '15 at 07:33
  • 1
    its a new features introduced in html5 ,by the help of canvas you can draw whatever shape like line,recangle,circle,curve you want with the help of javascript .it is like making figure with the programming – Ujjwal Kumar Gupta Aug 03 '15 at 07:38
1

You can check with the below link.

Fiddle

<div id="blue_box">
<div id="top"></div><hr>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div><hr class="hr2"><hr class="hr3">
<div class="divider1"></div>
<div class="divider2"></div>

Steevan
  • 826
  • 5
  • 8