HTML5和CSS3流程图

Question

是否有可能只使用CSS和HTML创建类似的东西，而不使用Raphael库等javascript和使用:: before和:: after选择器

Answer 1

是的，你可以。

http://jsfiddle.net/fR47n/

HTML

<div class="flow">

<div class="box">
<div id="one" class="block"></div>
<div id="two" class="block"></div>
<div id="three" class="block"></div>
<div id="four" class="block"></div>

<div id="five" class="block abs"></div>

<div id="six" class="block abs"></div>
</div>

<hr>

</div>

CSS

.flow {
    position: relative;
    margin: 50px;
}
.block {
    background-color: #555;
    height: 50px;
    width: 150px;
}
.box {
    width: 200px;
    border: 2px solid #555;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}
.box .block {
    position: relative;
    margin: auto;

}
#one {
    top: -25px;
}
#two {
    top: -8px;
}
#three {
    bottom: -8px;
}
#four {
    bottom: -25px;
}
.box .abs {
    position: absolute;
}
#five {
    top: 42px;
    left: -180px;
}
#six {
    top: 42px;
    right: -180px;
}
hr{
    position: absolute;
    border: 0;
    border-top: 2px solid #555;
    left: 0;
    right: 0;
    position: absolute;
    top: 60px;
    width: 300px;
    z-index: -1;
}