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

相关推荐
云端设计台2 小时前
2025流程图模板和工具深度评测:AI如何提升绘图效率80%?
人工智能·信息可视化·流程图·图表制作·图表工具
GUIRR20 小时前
二、GP/GS流程图
流程图
十五年专注C++开发6 天前
Drawnix:一款免费开源的白板工具,支持思维导图、流程图、类图和手绘图
流程图·思维导图·类图·drawnix·快速画图
阿࿆杰࿆6 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react
keer_zu8 天前
RadioIrqProcess函数详细分析与流程图
流程图
Hello123网站8 天前
多墨智能-AI一键生成工作文档/流程图/思维导图
人工智能·流程图·ai工具
南半球与北海道#8 天前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
不剪发的Tony老师9 天前
Drawnix:一款免费开源的白板工具,支持思维导图、流程图、手绘图
流程图·思维导图·白板工具·drawnix
zzywxc7879 天前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图
anghost1509 天前
基于单片机的防酒驾系统设计
单片机·嵌入式硬件·毕业设计·流程图