html流程图

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

效果图

html

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

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进行样式设置,包括步骤框和箭头。

相关推荐
<花开花落>12 天前
AI 辅助生成 Mermaid 流程图
ai·流程图·mermaid·tool
晓华-warm13 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
邪恶马铃薯15 天前
Deepseek+墨刀,1min快速生成流程图!
流程图·墨刀
lgldl15 天前
AI自动生成复杂架构图,流程图,思维导图
人工智能·ai·流程图
蓝爱人15 天前
Vue3中使用 Vue Flow 流程图方法
javascript·vue.js·流程图
打码人的日常分享18 天前
智慧园区建设资料合集(Wordppt原件)
大数据·物联网·流程图·智慧城市·制造
小马爱打代码22 天前
计算机系统设计:E-R图、类图、时序图、功能结构图、流程图、用例图、架构图
流程图
꧁༺摩༒西༻꧂24 天前
DeepSeek生成流程图
流程图
斯内科24 天前
C#使用MindFusion.Diagramming框架绘制流程图(3):加权图的最短路径算法
流程图
向明天乄1 个月前
Maotu流程图编辑器:Vue3项目中的集成实战与自定义流程开发指南
javascript·编辑器·vue·流程图