Draw an arrow between two divs
You might consider SVG.
In particular, you can use a line with a marker-end shaped with an arrow-path.
Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.
Since SVG is a DOM element, you can control the start/end position of the line in javascript.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/
<svg width="300" height="100"> <defs> <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" /> </marker> </defs> <path d="M30,150 L100,50" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" /></svg>
I have no idea whether anybody looks at this thread anymore but here's the solution i used, it differs only slightly from @markE answer in that this answer makes it much easier to specify exactly where the line needs to start and stop.
<head> <style> .arrow{ stroke:rgb(0,0,0); stroke-width:2; marker-end:url(#markerArrow) } </style></head><body> <svg height="210" width="500"> <defs> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" /> </marker> </defs> <line x1="0" y1="0" x2="200" y2="100" class="arrow" /> </svg></body>All you have to do is change the x and y coordinates of the line! I used this answer in my react app and it worked beautifully.And heres the fiddle.