当前位置：首页 > article >正文

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

article 2024/10/31 11:14:03

文章目录

前言
一、结果展示
二、操作步骤
- 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;
}