直接上效果图:

                <ul class="navs">
            <li>1</li>
             <li>2</li>
             <li>3</li>
            <li>4</li>
            </ul>

  

			.navs {
height: 100px;
}
.navs li {
padding: 0px 10px 0 30px;
line-height: 40px;
background: #50abe4;
display: inline-block;
color: #fff;
position: relative;
} .navs li:after {
content: '';
display: block;
border-top: 20px solid #50abe4;
border-bottom: 20px solid #50abe4;
border-left: 20px solid #fff;
position: absolute;
right: -20px;
top: 0;
} .navs li:after {
content: '';
display: block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #50abe4;
position: absolute;
right: -20px;
top: 0;
z-index: 10;
} .navs li:before {
content: '';
display: block;
border-top: 20px solid #50abe4;
border-bottom: 20px solid #50abe4;
border-left: 20px solid #fff;
position: absolute;
left: 0px;
top: 0;
} .navs li:first-child {
border-radius: 4px 0 0 4px;
padding-left: 25px;
} .navs li:last-child,
.cssNavEnd {
border-radius: 0px 4px 4px 0px;
padding-right: 25px;
} .navs li:first-child:before {
display: none;
} .navs li:last-child:after,
.cssNavEnd:after {
display: none;
} .navs li.active {
background-color: #ef72b6;
} .navs li.active:after {
border-left-color: #ef72b6;
}

最近有点忙,  有空的时候再分析一下实现原理  : )

  

css实现带箭头的流程条的更多相关文章

  1. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  2. css实现横向带箭头步骤流程效果

    通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+. 具体代码: <style type="text/css"> ul{margin:0 ...

  3. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  4. div+css制作带箭头提示框效果图(原创文章)

    一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...

  5. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  6. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  7. 圆角带箭头的提示框css实现

    css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...

  8. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

  9. 【荐】CSS实现漂亮实用带箭头的流程图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jQuery Datepicker 插件遇到问题

    Datepicker ver 1.7.3  浏览更多 常用设置 //禁用今天之前时间 $(".datePicker").datepicker('option', { minDate ...

  2. const当做标记的函数重载,但是仅仅是限于类里面的成员函数

    (1)我们知道函数的重载时根据函数的参数类型以及函数参数个数来重载的,不能用函数返回值来重载函数.但是有时候函数参数个数和函数参数类型重载函数会和默认参数发生冲突: int fun(int i,cha ...

  3. 客户被绑,蒙眼,惊问:“想干什么?” 对方不语,鞭笞之,客户求饶:“别打,要钱?” 又一鞭,“十万够不?” 又一鞭,“一百万?” 又一鞭。客户崩溃:“你们TMD到底要啥?” “要什么?...

    1.  客户被绑,蒙眼,惊问:“想干什么?”     对方不语,鞭笞之,客户求饶:“别打,要钱?”     又一鞭,“十万够不?”     又一鞭,“一百万?”     又一鞭.客户崩溃:“你们TMD ...

  4. 2018.09.28 牛客网contest/197/C期望操作数(状态转移+前缀和递推)

    传送门 比赛手动打了四项感觉有规律,调了40min+之后重新手算了后面几项发现只有前四项满足规律233. 首先这道题只跟q−xq-xq−x有关. 我们尝试找找递推关系. 我们令f[i]f[i]f[i] ...

  5. 2018.08.29 hdu3507 Print Article(斜率优化dp)

    传送门 这应该算是斜率优化的模板题了. 就是要求打印n个数,每个数有一个参数a[i],每打印一段连续的数[l,r]需要的花费是(a[[l]+...+a[r])2+m" role=" ...

  6. php PDO mysql

    php PDO写法连接mysql: $db=new PDO("mysql:host=localhost;dbname=sql","root","roo ...

  7. 推荐:普通UI设计师与顶级UI设计师的区别是什么?(转)

    我不是顶级设计师(我甚至不知道什么才叫顶级),即使见过的一些顶级(知名or优秀)设计师也因为交流不深入,无法评价.但是我勉强可以回答优秀的设计师,和普通的设计师(其实我觉得大部分的普通设计师只是认识他 ...

  8. xib中快捷键

    Alt  + 点击视图,实现快速复制 点击视图, + Alt  将鼠标放在另一个视图上,可以显示两视图x 和y方向的距离, 按方向键上下,调节两视图的距离 Command + Shift + G 前往 ...

  9. underscore utility

    1._.noConflict:命名冲突处理方法 _.noConflict = function() { root._ = previousUnderscore; //返回this不错 return t ...

  10. Android-Java-Thread的使用

    main线程跑三个任务: package android.java.thread2; class Demo { private String name; public Demo(String name ...