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_diagram > li,
    .process_diagram ol > li {display:table-cell; }
    
    .process_diagram > li,
    .process_diagram ol > li,
    .process_diagram ul > li {padding:.5em 0}
    
    /* a dash before and behind all uls */
    .process_diagram ul {position:relative; padding:0 var(--linewidth);}
    .process_diagram ul:before,
    .process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
    .process_diagram ul:before {left:0;}
    .process_diagram ul:after {right:0;}
    
    /* put connecting vertical lines */
    .process_diagram ul > li:after,
    .process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
    .process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
    .process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;}
    
    /* correct length and position of dashes for first and last li-item in ul */
    .process_diagram ul > li:first-child:before,
    .process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
    .process_diagram ul > li:last-child:before,
    .process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}
    
    /* put left a.........完整代码请登录后点击上方下载按钮下载查看