1

How to draw this diagonal line between these two div's ABC and XYZ

<div class="row">
<div class="abc">abc</div>
<div class="xys">xyz</div>
</div>

enter image description here

user4148466
  • 49
  • 1
  • 1
  • 5

1 Answers1

0

Take a look here: How to make a line through a div.

Another way you could do it is by making another div and use positioning and rotation like this:

#div-with-line {
  background-color: #eee;
  width: 200px;
  height: 200px;
}

#line {
  width: 280px;
  background-color: #ddd;
  height: 3px;
  transform: rotate(45deg);
  position: relative;
  right: 39px;
  top: 99px;
}
<div id="div-with-line">
  <div id="line"></div>
</div>

It makes a line through the div, but you have to change the positioning every time you change the width or the height of the box.

Caleb Gross
  • 391
  • 3
  • 12
  • Am trying to add diagonal line which will start from first div left 0 and cross between both divs and then second divs top then goes faded like tilt – user4148466 Nov 19 '21 at 11:12
  • So you are trying to do an animation? Sounds very complicated. Have you tried doing svg animations? Do some research on that. I think that would be more of what you are looking for. Its actually very simple. – Caleb Gross Nov 19 '21 at 11:17
  • No jot animation fixed diagonal line as in image white thin – user4148466 Nov 19 '21 at 17:48