JS绘制一个从一个div指向另一个div的箭头

要实现从一个div指向另一个div的箭头，可以使用JavaScript和CSS来完成。以下是一种实现方式：

首先，在HTML中创建两个div元素，分别为sourceDiv和targetDiv，用于表示箭头的起点和终点。

<div id="sourceDiv"></div>
<div id="targetDiv"></div>

在CSS中定义箭头的样式，可以使用伪元素::before或::after来创建箭头形状，并设置其样式属性。

.arrow {
  position: relative;
  width: 0;
  height: 0;
}

.arrow::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent transparent #000;
  transform: rotate(45deg);
}

在JavaScript中获取sourceDiv和targetDiv的位置信息，并计算箭头的起点和终点坐标。

var sourceDiv = document.getElementById("sourceDiv");
var targetDiv = document.getElementById("targetDiv");

var sourceRect = sourceDiv.getBoundingClientRect();
var targetRect = targetDiv.getBoundingClientRect();

var sourceX = sourceRect.left + sourceRect.width / 2;
var sourceY = sourceRect.top + sourceRect.height / 2;

var targetX = targetRect.left + targetRect.width / 2;
var targetY = targetRect.top + targetRect.height / 2;

创建一个箭头元素，并设置其位置和样式。

var arrow = document.createElement("div");
arrow.className = "arrow";
arrow.style.left = sourceX + "px";
arrow.style.top = sourceY + "px";
arrow.style.width = Math.sqrt(Math.pow(targetX - sourceX, 2) + Math.pow(targetY - sourceY, 2)) + "px";
document.body.appendChild(arrow);

通过以上步骤，就可以实现从一个div指向另一个div的箭头效果。可以根据实际需求调整箭头的样式和位置。