我正在寻找一个解决方案，但我原以为已经有人解决了这个问题。 但我看到的只有一些带有许多功能但没有简单解决方案的大项目。
实际上，我需要像这样的东西：
所以我需要在包含若干正方形（divs）的 div 上绘制箭头。
<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>
我朝画布的方向看去，但是在我的div后面并没有看到画布（或许加一些z-index会有帮助）。 但仍然很奇怪，我找不到一个现成的解决方案来解决这个看起来经常出现的问题。（为了在网站上解释某些东西，箭头几乎是必须的）
你可能考虑使用SVG。
特别是，你可以使用带有箭头路径形状的标记结束的线。
确保设置orient = auto，以使箭头末端旋转以匹配线的斜率。
由于SVG是DOM元素，因此您可以在javascript中控制线的起始/结束位置。
这里是代码和一个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>
我不知道是否还有人会关注这个帖子，但是这是我使用的解决方案，与 @markE 的答案仅略有不同，因为这个答案使得指定行的起始和结束位置更加容易。
<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>
你所需要做的就是改变这条线的 x 和 y 坐标！我在我的 React 应用程序中使用了这个答案，效果非常好。 这里是示例。
.arrow {
stroke: rgb(0, 0, 0);
stroke-width: 2;
marker-end: url(#markerArrow)
}<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>使用库，比如JSPlumb：https://jsplumbtoolkit.com/
然后你可以这样做：
<connection from="#id_1" to="#id_2" color="red" tail></connection>
如何包含它：
将.zip文件解压缩到您的项目文件夹中。 要么复制CSS和JavaScript到您的项目中，要么在您的项目中添加对这些文件的引用：
<head>
<!-- Your head-codes here -->
<link rel = "stylesheet" type = "text/css" href = "../plugins/domarrow.js-master/domarrow.css"/>
</head>
<body>
<!-- Your body-codes here -->
<script src="../plugins/domarrow.js-master/domarrow.js"></script>
</body>
在我的情况下，文件结构是：
C/MyProject/:.
│
├───css
│ start.css
│
├───html
│ start.html <--- write here
│
├───js
│ start.js
│
└───plugins
│
└───domarrow.js-master
domarrow.css
domarrow.js