首页 编程开发css3实现三角形面包屑导航

css3实现三角形面包屑导航

发布于: 2014-07-22 12:07:46
字数: 1874
评论: 0
阅读: 6063

首先先上图:

104543j8fi5d08f0rdq56t.png

因为公司的设计师对这种外观的面包屑导航有着执着的爱好。作为一个前端人员当然需要最大化的实现设计图的展示效果,最开始考虑的是用图片来实现,根据文字字符长短的变化,必须要切很长的图片。而后说需要做半透明的效果,一改透明度,发现三角形那块能够看得清下面的那个层,瞬间晕倒。
一直琢磨着能否用css3来做,试了一下,效果还不错






css3三角形面包屑导航







备注:该效果支持火狐、谷歌、Safari、IE8以上。设置导航半透明的话,直接设置外面的 li 的opacity值就可以了。




笔记作者:kittyyang

笔记链接:https://www.w3cfuns.com/blog-5396571-5399267.html



扫描二维码,在手机上阅读
评论列表:
张小白
2017-08-04 10:20
oo