【无标题】CSS +Html 绘制流程图

 

 

<style type="text/css">

        body {
            background-color: #fff;
        }

        .app {
            width: 800px;
            height: 800px;
            /*   border: 1px solid #000000;*/
            position: relative;
            top: 20px;
        }

        .body {
            width: 300px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /*background: #fff;*/
            display: inline-block;
        }

        .body1 {
            display: inline-block;
            width: 200px;
            height: 800px;
            position: absolute;
            margin: auto;
            /*background: #fff;*/
            top: 155px;
            left: 70%;
        }

        .flowNode {
            text-align: center;
            margin-left: 40%;
            position: relative;
        }

        .box {
            width: 100px;
            height: 50px;
            background-color: #41ae3c54;
            border-radius: 10px;
            text-align: center;
            line-height: 50px;
         
        }

        .color {
            background-color: #41ae3c54;
        }

        .solidGreen {
            width: 3px;
            height: 100px;
            background-color: #41ae3c54;
            text-align: center;
            margin-left: 25%;
        }

        .solidGrey {
            width: 3px;
            height: 100px;
            background-color: #80808054;
            margin-left: 40%;
        }

        .chuChoose {
            background-color: grey;
            top: 20px;
            left: 180px;
        }

        .yubeiChoose {
            background-color: grey;
            top: 170px;
            left: 180px;
        }

        .chubeikChoose {
            background-color: grey;
            top: 320px;
            left: 180px;
        }

        .solidGrey {
            background-color: #80808054;
            position: relative;
            cursor: pointer;
        }
//带箭头的直线
            .solidGrey::after {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                top: 94%;
                width: 0px;
                height: 0px;
                border-bottom: 10px solid #808080b8; /* 箭头高低 */
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                transform: translate(-50%, -50%) rotate(180deg);
            }
 //四分之一圆弧线
        .curve {
            width: 200px;
            height: 300px;
            background: radial-gradient( circle at 200px -5px, transparent 150px, #80808054 151px, transparent 152px ), radial-gradient( circle at 200px 300px, transparent 150px, #80808054 151px, transparent 152px );
            position: relative;
            cursor: pointer;
        }


//给圆弧线加箭头

            .curve::before {
                content: '';
                display: block;
                position: absolute;
                left: 26%;
                top: 99%;
                width: 0px;
                height: 0px;
                border-bottom: 10px solid #80808054; /* 箭头高低 */
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                transform: translate(-50%, -50%) rotate(60deg);
            }

            .curve::after {
                content: '';
                display: block;
                position: absolute;
                left: 103%;
                top: 49%;
                width: 0px;
                height: 0px;
                border-bottom: 10px solid #80808054; /* 箭头高低 */
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                transform: translate(-50%, -50%) rotate(90deg);
            }
</style>
<div class="app">
    <div class="body layui-row">
        <div class="flowNode">
            <div class="box color">提交</div>
            <div class="solidGreen  "></div>
            <div class="curve curve_one" style="position:absolute; top:27px;left:55px;display:block;"></div>
        </div>
        <div class="flowNode chu ">
            <div class="box chu">初选库</div>
            <div class="solidGreen"></div>
            <div class="curve curve_two" style="position: absolute; top: 28px; left: 55px; display: block; "></div>

        </div>
   
        <div class="flowNode yu  layui-hide">
            <div class="box  yu">预备库</div>
            <div class="solidGreen"></div>
            <div class="curve curve_three" style="position: absolute; top: 37px; left: 55px; display:block;"></div>
        </div>
      

        <div class="flowNode chubei layui-hide">
            <div class="box  chubei">储备库</div>
            <div class="solidGreen"></div>
        
        </div>
      
        <div class="flowNode">
            <div class="box color">执行库</div>
        </div>
    </div>

    <div class="body1">
        <div class="flowNode  chuGrey">
            <div class="box chu" style="background-color: #80808054">初选库</div>
        </div>
      


        <div class="flowNode  yuGrey ">
            <div class="solidGrey"></div>
            <div class="box  yu" style="background-color: #80808054">预备库</div>
        </div>
       


        <div class="flowNode chubeiGrey ">
            <div class="solidGrey"></div>
            <div class="box  chubei" style="background-color: #80808054">储备库</div>
        </div>
      



    </div>
 
</div>