Javascript CSS图形操作-连接动态div

我正在尝试使用CSS将许多动态生成的内容div与一行连接起来。每三个div都会有一条线弯曲，在其末端附加一个箭头图像，然后用一条额外的线分割内容

这里有人知道如何实现这一目标吗？我几乎没有CSS3的经验，但我认为它可能有类似的能力

我曾尝试在div之间添加一个固定高度的元素，但这必须是非常硬的编码，可能不是一个可行的解决方案

请记住，箭头可以是一个简单的图像，因此，在这里绘制箭头不是问题所在。这是我无法做到的绿线表示法

我试图实现的目标的图形表示：

---

应通过混合以下物质来实现：

下面是一个简单的代码，应该让您注意这只是一个概念，如果您想要更多的前/后元素，您可能应该将它们添加为列表元素的子元素：

HTML:

CSS:

现场：

如果您有任何问题或不清楚的地方，请随时提问：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

body {
    text-align: center;
}

ul {
    display: inline-block;
    margin: 0 auto;
    list-style-type: none;
}

ul li {
    position: relative;
    float: right;
    border: solid 1px #000;
    margin: 5px;
    width: 50px;
    height: 50px;
}

ul li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:nth-child(3n+1) {
    margin-bottom: 60px;
    clear: right;
}

li:nth-child(3n+1):before {
    content: ''; <!-- possibly your image url -->
}