Draw an arrow between two divs
canvas, css, html, javascript
Solution
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>
Problem
I'm searching for a solution of the question that I expected to be solved already. But I saw only big projects with a lot of features but no simple solution. Actually I need to get something like that: So to get an arrow drawing over a div containing some squares (divs) ``` <div id="container"> <div class="white_field"></div> <div id="1" class="black_field"> <br style="clear:both;"> <div id="2" class="black_field"> <div class="white_field"></div> <br style="clear:both;"> <div id="3" class="black_field"> <div class="white_field"></div> </div> ``` I looked in the canvas direction but stumbled on tha canvas was not visible behind my divs ( maybe some z-index should help ) But still strange that I couldn't find some ready-made solution of a problem that seems to me coming up often. ( to explain some thing on the site arrows are almost a must )