css绘制一个流程图效果代码-html代码-BFW代码库

css绘制一个流程图效果代码

代码语言：html

代码描述：css绘制一个流程图效果代码，div+css实现，无js代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        /* All parameters */
    :root {
      --linethick: 3px;
      --linewidth: 1.8em;
    }
    
    /* node style */
    .process_diagram li > div { background-color:#eef; color:#666; border-style:solid; border-color:#900; text-align:left; }
    
    /* connecting lines between nodes */
    .process_diagram li:before,
    .process_diagram li:after,
    .process_diagram ul:before,
    .process_diagram ul:after,
    .process_diagram div:before,
    .process_diagram div:after {border-style:solid; border-color:#000;}
    
    /* debug connecting lines * /
    .process_diagram div:before,
    .process_diagram div:after {border-color:green;}
    .process_diagram ul:before,
    .process_diagram ul:after {border-color:red;}
    /**/
    
    /************************************************************/
    
    /* positioning for the diagram */
    .process_diagram,
    .process_diagram ol,
    .process_diagram ul,
    .process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align:middle;}
    
    .process_diagram li {position:relative;}
    
    .process_diagram,
    .process_diagram ol {display:table; width:100%; border-collapse:collapse; }
    
    .process_diagr.........完整代码请登录后点击上方下载按钮下载查看