当前位置：首页 > news >正文

html流程图

news 来源：原创 2025/6/18 23:00:58

要创建一个HTML流程图，你可以使用HTML、CSS，不过，对于简单的流程图，你也可以直接使用HTML和CSS来手动布局。下面是一个使用纯HTML和CSS创建简单流程图的示例：

效果图

html

<!DOCTYPE html>
<html>
<head>
    <link href="draw.css" rel="stylesheet" />
    <script src="draw.js" type="text/javascript"></script>
</head>
<body>
    <div class="diamond" style="top:100px;left: 100px;">
        <span class="diamond-text">开始</span>
    </div>

    <!-- 下箭头 -->
    <div class="arrow-down" style="top:195px;left:140px;">
        <span></span>
    </div>

    <div class="rectangle" style="top:275px;left: 100px;">
        <span class="rectangle-text">步骤一</span>
    </div>

    <div class="arrow-down" style="top:325px;left:140px;">
        <span></span>
    </div>

    <div class="rectangle" style="top:405px;left: 100px;">
        <span class="rectangle-text">步骤二</span>
    </div>

    <div class="arrow-down" style="top:455px;left:140px;">
        <span></span>
    </div>

    <div class="diamond" style="top:550px;left: 100px;">
        <span class="diamond-text">分叉节点</span>
    </div>

    <div>
        <div class="arrow-down" style="top:645px;left:140px;">
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 100px;">
            <span class="rectangle-text">步骤三</span>
        </div>

    </div>

    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:205px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 220px;">
            <span class="rectangle-text">步骤四</span>
        </div>
        
        <div class="rectangle" style="top:725px;left: 330px;">
            <span class="rectangle-text">步骤5</span>
        </div>
    </div>
    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:345px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 480px;">
            <span class="rectangle-text">步骤6</span>
        </div>
    </div>
    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:485px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 620px;">
            <span class="rectangle-text">步骤7</span>
        </div>
    </div>
    <div class="arrow-down" style="top:775px;left:140px;">
        <span></span>
    </div>
    <div class="diamond" style="top:870px;left: 100px;">
        <span class="diamond-text">分叉节点</span>
    </div>
    <div class="arrow-down" style="top:965px;left:140px;">
        <span></span>
    </div>

  
    </div>
</body>
</html>

css

/* 椭圆 */
.ellipse {
    width: 100px;
    height: 50px;
    background-color: #6495ED;
    border-radius: 100px;
    text-align: center;
    position: absolute;
  }
  
  
  /* 菱形，长宽91.28 */
  .diamond {
    width: 80px;
    height: 80px;
    color: aliceblue;
    transform: rotate(45deg);
    background-color: rgb(249, 169, 100);
    position: absolute;
  }
   
  .diamond-text{
    width: 60px;
    margin-top: 10px;
    display: inline-block;
    transform: rotate(-45deg);
    text-align: center;
  }
  
  /* 长方形 */
  .rectangle{
    width: 92px;
    height: 50px;
    border: 1px;
    line-height: 50px;
    color: aliceblue;
    border-color: black;
    background-color: rgb(61, 64, 146);
    text-align: center;
    position: absolute;
  }
  
  /* 向下箭头 */
  .arrow-down {
    width: 2px;
    height: 80px;
    background-color: black;
    position: absolute;
  }
  
  .arrow-down span {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid black;
    position: relative;
    top:81px;left:-4px;
  }
  
  /* 折线箭头 */
  .arrow-horizontal-down {
    width: 180px;
    height: 2px;
    background-color: black;
    position: absolute;
    z-index: -1;
  }
  

  
  /* 横线 */
  .horizontal-line{
    width: 100px;
    height: 2px;
    background-color: black;
    position: absolute;
    z-index: -1;
  }

这个示例创建了一个简单的流程图，包括开始、执行步骤、检查条件、根据条件分支以及结束。流程图使用CSS进行样式设置，包括步骤框和箭头。