您现在的位置是：网站首页> 编程资料编程资料

手把手教你用CSS实现带箭头的流程进度条HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例CSS实现进度条和订单进度条 CSS3制作彩色进度条样式的代码示例分享基于CSS3实现可按进度百分比变色的进度条CSS3+JS实现iOS8风格loading加载进度条特效源码使用CSS实现阅读进度条

2021-09-04 1433人已围观

简介这篇文章主要给大家介绍了利用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; }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范详解利用css3的var()实现运行时改变scss的变量值uni-app中使用scss的示例代码scss使用mixin不生效(浏览器无法编译出来)的解决方法手机端用rem+scss做适配的详解CSS3 真的会替代 SCSS 吗

下一篇：CSS实现三栏布局的四种方法示例CSS经典三栏布局方案（6种方法）浅谈CSS三栏布局的Ｎ种实现CSS三栏布局探讨——中间固定宽度两边自适应宽度CSS Float布局过程与老生常谈的三栏布局 DIV+CSS 三栏布局实例代码css实现三栏布局的几种方法及优缺点

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢