html/css 一种分叉表格流程图的制作方法

1、首先，我们纯粹用div实现一个表格布局。所有单元都在.big-box中，首先按照列划分.column，再按照行划分.bar。对应的css样式如图所示。

3、给第三列的前三行和后三行分别添加transform样式，如图所示。首先Y方向剪切变换，再Y方向平移变换。效果如图，它们左边重叠，右边展开。

5、接下来添加样式，修改这些单元格的颜色和不透明度，实现了流程图效果如图。每个bar内可以按需添加其它内容。