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;
}
相关推荐
繁花与尘埃2 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
over6974 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
白兰地空瓶6 小时前
用 CSS3 造一场星际穿越:前端导演的《星球大战》片场手记
css
lh14245734957 小时前
ECSide标签<ec:table>表格对不齐问题处理
css·1024程序员节
加蓓努力我先飞8 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
有点笨的蛋8 小时前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV8 小时前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
inx1778 小时前
HTML 敲击乐 PART--2
javascript·css
Tzarevich8 小时前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css
BBB努力学习程序设计9 小时前
CSS复合选择器
前端·html