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

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

.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);
}

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);