Vue

by id0

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <path id="connector" fill="none" stroke="black" stroke-width="1" />
</svg>
<div id="a">This is a regular HTML div.</div>
<div id="b">So is this.</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
div {
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 200px;
  height: 100px;
}
#a {
  background-color: blue;
  top: 20px;
  left: 20px;
}
#b {
  background-color: red;
  bottom: 20px;
  right: 20px;
}

Vue

var divA      = document.querySelector("#a");
var divB      = document.querySelector("#b");
var connector = document.querySelector("#connector");

var drawConnector = function() {
  var posnA = {
    x: 0, // divA.offsetLeft + divA.offsetWidth,
    y: 0, // divA.offsetTop  + divA.offsetHeight / 2
  };
  var posnB = {
    x: 200, // divB.offsetLeft,
    y: 200, // divB.offsetTop  + divA.offsetHeight / 2
  };
  var dStr =
      "M" +
      (posnA.x) + "," + (posnA.y) + " " +
      "C" +
      (posnA.x + 75) + "," + (posnA.y) + " " +
      (posnB.x - 75) + "," + (posnB.y) + " " +
      (posnB.x) + "," + (posnB.y);
  connector.setAttribute("d", dStr);
};

window.addEventListener("resize", drawConnector);

drawConnector();