使用原生HTML和css制作一个箭头步骤条

文章目录

前言

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


一、结果展示

二、操作步骤

2.1、HTML

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

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

三、感谢

如果觉得有用欢迎点赞关注。

有问题私信我!!~~

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip