.wizard { margin:; padding:; overflow: hidden; font-size:; }

    .wizard li { font-size: 14px; list-style-type: none; display: inline-block; position: relative; margin:; padding:; text-align: center; line-height: 30px; height: 30px; background-color: #C3C3C3; }
.wizard li > span { display: block; color: #FFFFFF; font-weight: bold; text-transform: uppercase; width: 150px; } .wizard li.done > span { color: #FFFFFF; background-color: #3c8dbc; }
.wizard li > span::after,
.wizard li > span::before { content: ""; display: block; width:; height:; position: absolute; top:; left:; border: solid transparent; border-left-color: #C3C3C3; border-width: 15px; } .wizard li > span::after { top: -5px; z-index:; border-left-color: white; border-width: 20px; } .wizard li > span::before { z-index:; }
.wizard li.done + li > span::before { border-left-color: #3c8dbc; } .wizard li:first-child > span::after,
.wizard li:first-child > span::before { display: none; }
.wizard li:first-child i { display: block; height:; width:; position: absolute; top:; left:; border: solid transparent; border-width: 15px; }
.wizard li:last-child i { display: block; height:; width:; position: absolute; top:; left:; border: solid transparent; border-left-color: white; border-width: 15px; } .wizard li:last-child i { left: auto; right: -15px; border-left-color: transparent; }
<ul class="wizard">
<li class="done"><span>申请</span><i></i></li>
<li class="done"><span>申请</span><i></i></li>
<li class="done"><span>申请</span><i></i></li>
<li class="done"><span>申请</span><i></i></li>
<li class="done"><span>申请</span><i></i></li>
<li class="done"><span>申请</span><i></i></li>
<li><span>申请</span><i></i></li>
<li><span>申请</span><i></i></li>
<li><span>申请</span><i></i></li>
</ul>

CSS 步骤进度条的更多相关文章

  1. 步骤进度条 css

    用css写一个简单的步骤进度条 html代码: <h4>南京游玩</h4> <ul class="step-list"> <li> ...

  2. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  3. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  4. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  5. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  6. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  7. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  8. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  9. css绘制进度条,持续转动的进度条

    //只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...

随机推荐

  1. PowerDesigner 中模型设计导出Excel表格

    今天项目做设计,客户要看数据设计,需要到处Excel表格.去网上搜索下,把使用总结如下: 已经完成设计的pd设计 打开pd,快捷键Ctrl + Shift + X或者Tools>Exectue ...

  2. Object.assign方法的使用

    https://www.cnblogs.com/chenyablog/p/6930596.html

  3. c#判断是否有网络

    //调用操作系统API [System.Runtime.InteropServices.DllImport("wininet")] private extern static bo ...

  4. 获取请求IP

    服务器获取客户端或者网页的请求,获取IP时需要注意,并不是直接 request.getRemoteAddr(); 就可以了,因为一个请求到达服务器之前,一般都会经过一层或者多层代理服务器,比如反向代理 ...

  5. centos 7 IP不能访问nginx Failed connect to 185.239.226.111:80; No route to host解决办法

    服务器环境 centos 7.4 问题描述 1.可以ping通IP ,用IP访问nginx 不能访问,在服务器上curl localhost  curl 185.239.226.111可以获得 [ro ...

  6. Spring AOP @AspectJ 入门基础

    需要的类包: 1.一个简单的例子 Waiter接口: package com.yyq.annotation; public interface Waiter { void greetTo(String ...

  7. Install Local SQL In Mac OS

    extends:http://www.cnblogs.com/maxinliang/p/3583702.html 一.安装 到MySQL官网上http://dev.mysql.com/download ...

  8. electron+react

    yarn create react-app electron-react cd electron-react yarn run eject // 修改react-app打包的路径 / -> ./ ...

  9. v-if和v-show

    1.v-if 当值为 true时,显示元素 ,当值为false时,改元素消失------------------(销毁与重建dom) 2.v-show 当值为 true时,显示元素(display:b ...

  10. python全栈开发* 02 知识点汇总 * 180531

    运算符和编码 一  格式化输出 1  .输入  name ,age , job , hobby. 输出  :   ---------------  info of Mary  ------------ ...