使用原生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;
}

三、感谢

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

有问题私信我!!~~

相关推荐
KrisZhang1015 分钟前
Git分支
git·1024程序员节
GDAL22 分钟前
npm入门教程13:npm workspace功能
前端·npm·node.js
呼叫694533 分钟前
为什么说vue是双向数据流
前端·javascript·vue.js
我命由我1234543 分钟前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
孤邑1 小时前
【C++】C++四种类型转换方式
开发语言·c++·笔记·学习·1024程序员节
wumu_Love1 小时前
npm 和 node 总结
前端·npm·node.js
顾辰呀1 小时前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3
nixiaoge2 小时前
Web前端第二次作业
前端·javascript·css3
浮华似水2 小时前
Docker入门系列——镜像原理
前端
Gavin_9152 小时前
【JavaScript】数组-集合-Map-对象-Class用法一览
开发语言·前端·javascript