Suraj-Ui
Suraj-Ui

Reputation: 196

What is easy way to draw this lines?

I have used div tag for line but i need easy way for this . I only know about div tag for this if you have another solution so please help me

#line{
background-color:black;
height:1px;
width:50px;
margin-top:50px;
margin-left:50px;
float:left;
}
<div id="line">
</div>

enter image description here

Upvotes: 1

Views: 90

Answers (3)

akhtarvahid
akhtarvahid

Reputation: 9769

.line{
width: 150px;
border: 1px solid coral;
}
        <hr class="line" />
        
        
        
        <div class="line"></div>

Upvotes: 0

Atul Mathew
Atul Mathew

Reputation: 455

You can use svg for this

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

  1. The x1 attribute defines the start of the line on the x-axis
  2. The y1 attribute defines the start of the line on the y-axis

  3. The x2 attribute defines the end of the line on the x-axis

  4. The y2 attribute defines the end of the line on the y-axis

For more info:https://www.w3schools.com/graphics/svg_line.asp

Upvotes: 2

Bilal Hussain
Bilal Hussain

Reputation: 572

you can use hr tag for line as well like

<hr id="line">

#line{
     width:5px
}

Upvotes: 1

Related Questions