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

三、感谢

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

有问题私信我!!~~

相关推荐
爱分享的程序员21 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘26 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出27 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的28 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解30 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵33 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im34 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man34 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构