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;
}