Как динамически соединить 2 html элемента?

Question

[Дмитрий]

Вот пример, но только элементы могут быть под углом:
jsfiddle.net/zaekfzwx

То что нужно:

Answer 1

[Денис]

Грубый набросок, но доводить до ума - уже нет сил. Возможно, что натолкнет на мысли в нужном направлении:

var point1 = document.getElementById('a'),
  point2 = document.getElementById('b'),
  line = document.getElementById('c');

document.addEventListener('click', function() {
  var x1 = point1.offsetLeft,
    y1 = point1.offsetTop,
    x2 = point2.offsetLeft,
    y2 = point2.offsetTop,
    width = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
    angle = Math.atan2(y1 - y2, x1 - x2) / Math.PI * 180;
  angle = (angle < 0) ? angle + 360 : angle;
  line.style.cssText = 'transform: rotate(' + angle + 'deg); top: ' + (y2 + 25) + 'px; left: ' + (x2 + 25) + 'px; width: ' + width + 'px';
});

Comments

[Дмитрий]

Спасибо.