html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习。
首先写出一个基本的样式。
.cssNav li{
padding: 0px 20px;
line-height: 40px;
background: #50abe4;
display: inline-block;
color: #fff;
position: relative;
}
接下来使用 :after 伪类画出一个三角形,定位到右边,如下:
.cssNav li:after{
content: '';
display: block;
border-top: 20px solid red;
border-bottom: 20px solid red;
border-left: 20px solid blue;
position: absolute;
rightright: -20px;
top: 0;
}
然后将after的颜色修改下,基本的雏形已经看到了。
.cssNav li:after{
content: '';
display: block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #50abe4;
position: absolute;
rightright: -20px;
top: 0;
z-index: 10;
}
继续使用 :before 伪类来画出左边的三角形。如下:
.cssNav li:before{
content: '';
display: block;
border-top: 20px solid red;
border-bottom: 20px solid red;
border-left: 20px solid blue;
position: absolute;
left: 0px;
top: 0;
}
然后修改下before的颜色,并复制多个模块看看。
最后把开头和结尾的稍微修饰一下。
.cssNav li:first-child{
border-radius: 4px 0 0 4px;
padding-left: 25px;
}
.cssNav li:last-child,.cssNavEnd{
border-radius: 0px 4px 4px 0px;
padding-right: 25px;
}
.cssNav li:first-child:before{
display: none;
}
.cssNav li:last-child:after,.cssNavEnd:after{
display: none;
}
加上选中状态,大功告成。
.cssNav li.active {
background-color: #ef72b6;
}
.cssNav li.active:after {
border-left-color: #ef72b6;
}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条相关推荐
- vscode angular智能提示_【线下活动】手把手教你玩转 VS Code 插件开发
感谢 Google Developer Group 的邀请,3 月 30 号下午,韩老师将手把手带你玩转 VS Code 插件开发. Angular 使用了 TypeScript,VS Code 使用 ...
- 【1秒学会录屏】手把手教你使用Win10自带录屏工具xbox
[1秒学会录屏]手把手教你使用Win10自带录屏工具xbox 当你想要把你操作的过程录下来, 你会怎么做呢? 在网上找一堆录屏软件? 还是抱别人大腿? 要么干脆不录了! 现在, 只要你是Win10系统 ...
- jquery css 流程进度条
方案1: 方案2: <!DOCTYPE html> <html><head> <meta charset="utf-8"> < ...
- 报名 | NVIDIA线下交流会:手把手教你搭建TensorFlow Caffe深度学习服务器
7月21日(周六)下午14:30,量子位与NVIDIA英伟达开发者社区联合举办线下交流会,拥有丰富一线开发经验的NVIDIA开发者社区经理Ken He,将手把手教你搭建TensorFlow & ...
- CSS使用线性渐变实现滚动进度条
效果查看:https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100 CSS: body {position: relative;padding: 50px ...
- css实现成长值类似的进度条效果
效果: 代码: <view><view class="levelGrow"><view class="progress">& ...
- Css的一些效果代码(旋转,进度条,透明,固定)
1.背景图片固定,不随滚动而变动 body { background-position: center; background-repeat: no-repeat; background-attach ...
- css样式制作步骤流程进度条
效果图如下 html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改) css样式部分代码 第一步:生成一个长方形效果 第二步:根据:after在长方形后面生成一个三角形 第三步:修改后面三 ...
- 名字中间一条线怎么弄_网名怎么加横线啊 网名中间加一条横线
怎么在网名中间加个横线? 工具/原材料QQ软件方法/步骤1.登录我们的QQ,点击QQ面板的头像,然后选择编辑数据.2接下来我们将把昵称改成横线.三.点击每个汉字前后的"ALT 822&quo ...
最新文章
- ASP.NET中常用的文件上传下载方法
- 同步器之Exchanger
- 计算机采购类增值税税率是多少,各个行业的税率是多少?
- 教育部统考 计算机应用,9月教育部统考《计算机应用基础》试卷一附答案.doc
- D语言/dlang 2.085.0 发布,GC、Objective-C 混编增强
- Oracle案例:一次非常艰难的drop多个PDB的恢复
- 云小课 | 守护网络安全不是问题,iptables的四表五链为你开启“八卦阵”
- 如何关闭139端口及445端口等危险端口
- 域对抗网络Domain adversarial neural network及其应用相关论文
- 总是通过加班,来完成工作,那都是假象
- 微信小程序图片全屏显示
- <EDEM 常见问题01>EDEM 2018-Fluent 17.0 耦合接口编译(快速上手版)
- java项目大概多少张表,要把数据插入到多张表?该如何处理
- 【PYTHON,WORD】3.调整Word文档样式
- 通往测试架构师之路(1):那些家伙在干什么?
- 技术最好的时代,会是技术创业最好的时代吗?
- 京北机房 怀来云交换数据中心主机托管
- 【修真院java小课堂】clean,install,package,deploy分别代表什么含义?
- 《Effective Objective-C 2.0》读书笔记
- 1062 Talent and Virtue (25 分)(坑点分析)