html实现原理和流程图,原生js+div+css，动态画结构图/流程图

前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。

代码如下，可直接复制粘贴。

html部分：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

动态绘制结构图

* {

margin: 0;

padding: 0;

}

div.rect {

height: 40px;

border-radius: 10px;

background: pink;

text-align: center;

padding: 5px;

margin: 5px 5px;

}

div.rect:hover {

cursor: pointer;

}

div.rect p {

font-size: 14px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

}

div.flex {

display: flex;

justify-content: center;

flex-wrap: wrap<