直接上效果图:

                <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. hdu-1131(卡特兰数+大数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1131 思路:R(x)=h(x)*n!=C(n,2*n)*n!=A(n+2,n*2); #include ...

  2. mysql date_sub用法

    查询一天: select * from table where to_days(column_time) = to_days(now()); select * from table where dat ...

  3. "请求被中止: 未能创建 SSL/TLS 安全通道"解决办法

    1.安装证书: 手动双击证书安装,过程略 2.分配权限: 在控制台中找到安装的证书,右键选择“管理私钥”, 添加自己需要的权限,如果在测试可以直接添加Everyone 3.修改代码:public st ...

  4. SSH整合 第三篇 Spring的加入

    1.思路和想法. 目前理解到的,觉得是的,可能的,应该这样的……………… Spring的两大核心是IoC和AOP Ioc:帮助实例化对象,加载到容器中,在注入到需要用到的地方.这样就可以减少在不同的方 ...

  5. (连通图 模板题 无向图求割点)Network --UVA--315(POJ--1144)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  6. Codeforces777C Alyona and Spreadsheet 2017-05-04 17:46 103人阅读 评论(0) 收藏

    C. Alyona and Spreadsheet time limit per test 1 second memory limit per test 256 megabytes input sta ...

  7. java反射中的动态代理机制(有实例)

    在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...

  8. Two ways to see predicates added by VPD or FGAC

    http://www.bobbydurrettdba.com/2012/07/17/two-ways-to-see-predicates-added-by-vpd-or-fgac/ Two ways ...

  9. XCode 7.3.1(dmg) 官方直接下载地址(离线下载)

    XCode 7 7.3.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.3. ...

  10. Eclipse ADT 代码注释模版

    具体怎么用: 将下面的内容拷贝出来保存为XML文件,进入,Eclipse :Window --> Java --> Code Style --> Code Templates-> ...