要创建一个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进行样式设置，包括步骤框和箭头。
