使用原生HTML和css制作一个箭头步骤条
文章目录
- 前言
- 一、结果展示
- 二、操作步骤
- 2.1、HTML
- 2.2、CSS
- 三、感谢
前言
创建一个箭头步骤条通常涉及到使用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;
}
三、感谢
如果觉得有用欢迎点赞关注。
有问题私信我!!~~