html简易流程图

效果图

使用html+css+js,无图片,没用Canvas

demo:

复制代码
<!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:195px;">
            <div></div>
            <span></span>
        </div>

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


</body>
</html>

css:

css 复制代码
/* 椭圆,未用到,使用时需修改 */
.ellipse {
  width: 200px;
  height: 100px;
  background-color: #6495ED;
  border-radius: 100px;
}

.ellipse-text {
  width: 150px;
  height: 150px;
  margin-top: 20px;
  margin-left: 20px;
}

/* 菱形,长宽91.28 */
.diamond {
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  background-color: #bfa;
  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;
  border-color: black;
  background-color: aquamarine;
  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: 80px;
  height: 2px;
  background-color: black;
  position: absolute;
}

.arrow-horizontal-down div{
  width: 2px;
  height: 125px;
  left:80px;
  background-color: black;
  position: relative;
}

.arrow-horizontal-down span {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid black;
  position: relative;
  top:10px;left:76px;
}
相关推荐
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx7 小时前
前端-CSS-day1
前端·css
全宝8 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔8 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录10 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
祝余呀11 小时前
HTML初学者第三天
前端·html
就爱瞎逛11 小时前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind