javascript - CSS图形操作——连接动态Divs

Question

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

这里有人知道如何实现吗？ (我的 CSS3 经验非常有限(几乎没有)，但我假设它可能有类似的能力)

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

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

我要实现的目标的图形表示:

Answer 1

它应该可以通过混合以下内容来实现:

pseudo elements

:nth-child

这是一个简单的代码，可以让你继续(注意这只是一个概念，如果你想要更多的前/后元素，你应该将它们添加为列表元素子元素):

HTML:

<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>

CSS:

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 -->
}

直播:http://jsfiddle.net/bartkarp/nd39pwh3/

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