SOURCE

// let pickIcon = document.getElementsByClassName('info-item--pickup');
// let distance = Math.floor((pickIcon[0].offsetHeight - 30)/2);
// console.log(distance)
// let _top = 20 + 30 + distance;
// let _left = 50 + 15;
// let ele = document.querySelector('#myCanvas');
// let context = ele.getContext('2d');
// context.beginPath();
// context.moveTo(_left, _top);
// // context.fillStyle="#147ef6";
// context.lineTo(_left, 40 + pickIcon[0].offsetHeight + distance);
// context.strokeStyle = '#147ef6'
// context.stroke();
// context.fill();
// context.closePath();

<div class="info">
  <div class="info-item info-item--pickup">
    <p>江西省南昌市就老发顺丰是否所发生的发十多个</p>
    <p>2018-09-28</p>
  </div>
  <div class="info-item info-item--return">
    <p>江西省南昌市就老发顺丰是否所发生的发十多个</p>
    <p>2018-09-28</p>
  </div>
  <canvas id="myCanvas" width=500 height=168></canvas>
</div>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

p { margin: 0; padding: 0 }
.info {
  border: 1px solid #e5e5e5;
  width: 500px;
  padding: 20px 50px;
  position: relative;
}
.info-item {
  border: 1px solid red;
  margin-bottom: 20px;
  padding-left:  30px;
  position: relative;
}
.info-item:last-child {
  margin-bottom: 0
}
.info-item--pickup::before, .info-item--return::before {
  content: '取';
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  position:absolute;
  border-radius: 100%;
  background: #147ef6;
  text-align:center;
  color: #fff;
  left: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.info-item--return::before {
  content: '还';
}
.info-item--return::after {
  content: '';
  height: 50px;
  border: 1px solid #147ef6;
  position: absolute;
  top: -35px;
  left: 14.5px;
  z-index: 1;
}
#myCanvas {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing:border-box;
}