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

代码语言：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 and right dashes */
    .process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: 1em; border-width:var(--linethick); }
    .process_diagram li > div:before,
    .process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
    .process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));}
    .process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
    .process_diagram li:last-child > div:after,
    .process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);}
    
    /* remove dash for the very first/last nodes keeping margin and padding */
    .process_diagram > li:first-child > div:before,
    .process_diagram > li:first-child > ul:before,
    .process_diagram > li:first-child > ul > li:before,
    .process_diagram > li:first-child > ul > li > div:first-child:before,
    .process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
    .process_diagram > li:last-child > div:after,
    .process_diagram > li:last-child > ul:after {border:0;}
    
    /* remove double dashes */
    ol.process_diagram.........完整代码请登录后点击上方下载按钮下载查看