2021世界500强企业排名_淮北在建项目_凡科建站靠谱吗_手机金融界网站

前言

创建一个箭头步骤条通常涉及到使用HTML来定义结构，CSS来定义样式。下面是一个简单的示例，展示了如何使用原生HTML和CSS来制作一个箭头步骤条。

---

一、结果展示

二、操作步骤

2.1、HTML

    <div id="step-box"><div class="stepBar1 stepBarOne active-ba"><span class="cirle">1</span><span class="font-sign active-font">阅读须知</span></div><div class="stepBar1 active-ba "><span class="cirle">2</span><span class="font-sign active-font">情景选择</span></div><div class="stepBar1 active-ba"><span class="cirle">3</span><span class="font-sign active-font">表单填写</span></div><div class="stepBar1"><span class="cirle">4</span><span class="font-sign">材料上传</span></div><div class="stepBar1"><span class="cirle">5</span><span class="font-sign">领取方式</span></div><div class="stepBar1"><span class="cirle">6</span><span class="font-sign">申请成功</span></div></div>

2.2、CSS

#step-box  {display: flex;
}
#step-box .cirle {display: inline-block;border-radius: 50%;background: #fff;width: 30px;margin: 5px 18px;height: 30px;color: #0b76c8;line-height: 30px;text-align: center;
}
.stepBar{ width: 164px;height: 40px;background: #e3edf6;position: relative;line-height: 40px;margin: 0px 4px;color: #fff;}
.active-ba{background: #0b76c8;
}
.stepBar::before { content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #e3edf6;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;right: -33px;top: 0px;z-index: 1;
}
.active-ba::before{border-color: transparent transparent transparent #0b76c8;
}
.stepBar::after{content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #fff;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;left: 0px;top: 0px;
}

三、感谢

如果觉得有用欢迎点赞关注。
有问题私信我！！~~