如何在两个div之间绘制对角线答案

【问题标题】：How to draw the diagonal line between two div's如何在两个div之间绘制对角线
【发布时间】：2021-12-30 03:31:45
【问题描述】：

如何在这两个div的ABC和XYZ之间画这条对角线

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

【问题讨论】：

标签： html css canvas transient skew

【解决方案1】：

看这里：How to make a line through a div。

另一种方法是制作另一个 div 并像这样使用定位和旋转：

#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>

它在div中划了一条线，但每次改变盒子的宽度或高度时，你都必须改变定位。

【讨论】：

我正在尝试添加对角线，该对角线将从第一个 div 左 0 开始并在两个 div 之间交叉，然后第二个 div 顶部然后像倾斜一样褪色
所以你想做一个动画？听起来很复杂。您是否尝试过制作 svg 动画？对此做一些研究。我认为这将是您正在寻找的更多内容。其实很简单。
没有像白色细的图像那样固定对角线的记事本动画