Javascript 使箭头指向特定（x，y）点

您好，我正在尝试让两个箭头指向一个特定的x，y点或按钮的一般区域

我想要两个箭头从每个框中指向按钮的一般区域。我可以在某些屏幕上使用常规css，但当屏幕大小调整或缩小时，箭头不再指向按钮。我只是想找出一个好办法来处理这件事

所以我真正想问的是，在指向同一点的两个div后面加上两个箭头是什么好方法。红场

JSFIDDLE：

HTML

---

我不是一个真正的数学爱好者，我设法在互联网上找到一个公式来做你想做的事

源代码，而不是跟随鼠标，我使它跟随按钮 PS：为了这个解释，我删除了右边的html

我知道这不是一个完整的答案，但你可以从这里调整它

window.onresize=指向； 函数指向{ 让点=document.querySelector'.数据源按钮'； 设rad=Math.atan2point.offsetLeft，point.offsetTop； 设左=rad*20/Math.PI*-5+60； document.querySelector'.leftArrow'.style.transform=rotate+left+deg } 磨尖； .应用程序信息面板{ 边界半径：4px； 高度：30雷姆； 框大小：边框框； 填充：20px； 位置：相对位置； 宽度：100%； } .应用程序信息面板h1{ 字体大小：1.5rem； 字号：500； } .数据源面板包装器{ 位置：绝对位置； 用户选择：无； } .数据源面板包装器.源箭头{ 位置：绝对位置； 左：calc50%-50px； 底部：20px； 字体大小：12.5rem； 颜色：D6D7D8； 变换原点：左； z指数：1； } .数据源面板包装h1{ 字体大小：1.4rem； 颜色：0481E2； 文本对齐：居中； } .数据源小组{ 位置：相对位置； 显示器：flex； 框大小：边框框； 填充：1rem； 边界半径：10px； 背景色：fff； 盒影：0 1px4p0 rgba0,0,0,0.37； z指数：2； } .数据源面板.数据源信息h3{ 颜色：0481E2； 边际上限：0； 利润底部：3倍； 字体大小：.8rem； 线高：正常； } .数据源面板.数据源信息h2{ 保证金：0； 字体大小：16px； 字体大小：400； 线高：正常； } 源报告。数据源面板。数据源信息{ 右边距：18px； } .数据源按钮{ 显示：块； 宽度：220px； 高度：68px； 字体大小：1.25rem； 保证金：18.750； 颜色：白色； 背景色：FF9700； } 数据源 报告文件 报告Id 1. 报告名称 药品库存 日期 02/16/18 记者 约翰·史密斯 &10141; 订单填写

---

要清楚这一点，你是在寻找一个纯css解决方案还是可以包含JavaScript？任何真正的css、js、svg我只是不知道如何去做。你需要创建一个适合所有div的透明画布。然后使用一些JavaScript，你应该能够做到。哦，我实际上通过使用画布覆盖来修复它，但这种方式也可以工作！是的，画布使用起来更方便，有很多框架可以让画画变得非常简单。

<div class='app-info-panel'>
  <div class='app-info-panel-header'>
    <h1>Data-sources</h1>
  </div>

  <div class='data-source-panel-wrapper' id='source_report'>
    <h1>Report_File</h1>
    <div class='data-source-panel'>
      <div class='data-source-info'>
        <h3>Report Id</h3>
        <h2>1</h2>
      </div>
      <div class='data-source-info'>
        <h3>Report Name</h3>
        <h2>Medicine-stock</h2>
      </div>
      <div class='data-source-info'>
        <h3>Date</h3>
        <h2>02/16/18</h2>
      </div>
      <div class='data-source-info'>
        <h3>Reporter</h3>
        <h2>John Smith</h2>
      </div>
    </div>
    <div class='source-arrow' style="transform: rotate(50deg); top: -10px">
      &#10141;
    </div>
  </div>

  <div class='data-source-panel-wrapper' id='source_order'>
    <h1>Order_movement</h1>
    <div class='data-source-panel'>
      <div class='data-source-info'>
        <h2>ID: 1</h2>
      </div>
      <div class='data-source-info'>
        <h2>Medicine-stock</h2>
      </div>
      <div class='data-source-info'>
        <h2>02/16/18</h2>
      </div>
      <div class='data-source-info'>
        <h2>John Smith</h2>
      </div>
    </div>

    <div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
      &#10141;
    </div>
  </div>

  <div>
    <button class='data-source-button'>Order Filling</button>
  </div>

</div>

.app-info-panel {
  border-radius: 4px;
  height: 30rem;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  width: 100%;

  h1 {
    font-size: 1.5rem;
    font-weight: 500;
  }
}

.data-source-panel-wrapper {
  position: absolute;
  user-select: none;

  .source-arrow {
    position: absolute;
    left: calc(50% - 50px);
    bottom: 20px;
    font-size: 12.5rem;

    color: #D6D7D8;
    transform-origin: left;
    z-index: 1;
  }

  h1 {
    font-size: 1.4rem;
    color: #0481E2;
    text-align: center;
  }
}

.data-source-panel {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  z-index: 2;

  .data-source-info {
    h3 {
      color: #0481E2;
      margin-top: 0;
      margin-bottom: 3px;
      font-size: .8rem;
      line-height: normal;
    }

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
  }
}

#source_report {
  .data-source-panel {
    .data-source-info {
      margin-right: 18px;
    }
  }
}

#source_order {
  right: 60px;

  .data-source-panel {
    flex-direction: column;

    .data-source-info {
      margin: 5px 0;
    }
  }
}

.data-source-button {
  display: block;
  width: 220px;
  height: 68px;
  font-size: 1.25rem;
  margin: 18.75rem auto 0;
  color: white;
  background-color: #FF9700;
}