让箭头指向特定的(x,y)点

您好,我正在尝试让两个箭头指向特定(x,y)点或按钮的常规区域。

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

因此,我真正想问的是,在指向同一点的两个div之后附加两个箭头是什么好方法。(红场)

JSFIDLE(JSIDLE): https://jsfiddle.net/kxw7jquu/

HTML

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

CSS

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