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

三、感谢

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

有问题私信我!!~~

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头6 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全7 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing7 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆7 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试