html创建样式表,使用HTML/CSS创建流程图

我正在尝试使用HTML/CSS创建一个可以容纳多个节点的结构。

在将来,我打算将其与一个角度应用程序集成,但目前我只希望创建这个结构。

我的愿望是创建一个可以接收多个序列节点的结构,有时还会产生分支。

我试图使用CSS3的::after和::before创建一个结构。但我想我最终在实施过程中变得相当困惑。遵循下面的代码。

.node:first-child::before {

border: 0 none;

}

.node::before {

content: '';

display: block;

top: 0;

right: auto;

left: 50%;

border-right: 4px solid #067a2d;

width: 50%;

height: 40px;

}

.node:last-child::after {

border: 0 none;

}

.node span {

text-align: center;

padding: 5px 10px;

max-width: 300px;

margin-left: auto;

margin-right: auto;

border: 2px solid #673ab7;

display: block;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

transition: all 0.5s;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

}

.nodeBranch {

column-count: 2;

}

.nodeBranch::before,

.nodeBranch::after {

content: '';

display: block;

position: absolute;

width: 50%;

left: 25%;

border-top: 4px solid #067a2d;

}

.branch {

padding: 0px;

}

.branch .node:first-child::before,

.branch .node:last-child::after {

content: '';

display: block;

top: 0;

right: auto;

left: 50%;

border-right: 4px solid #067a2d;

width: 50%;

height: 80px;

}

Step 1

Step 2

Step 3

Step 4.1

Step 4.2

Step 5.1

Step 5.2

Step 7

Step 8

谢谢你的帮助。