首页 css3实现三角形面包屑导航

css3实现三角形面包屑导航

子恒 2014-7-22 0 3901

首先先上图:

104543j8fi5d08f0rdq56t.png

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


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3三角形面包屑导航</title>
<style type="text/css">
*{ margin:0; padding:0;}
.breadnav{ margin:100px 10px;}
ul li{ float:left; list-style:none; height:40px;}
ul li a{
  border-left: 20px dashed transparent;
  height:0;
  line-height:0;
  color:#fff;
  float:left;
  padding:0 20px;
  text-decoration:none;
  text-transform:uppercase;
  font-family:Arial;
  font-size:12px;
}
ul li.home a{ background:#222; border-bottom: 20px solid #222; border-top: 20px solid #222; }
ul li.subnav1 a{ background:#222; border-bottom: 20px solid #036daa; border-top: 20px solid #036daa;}
ul li.subnav2 a{ background:#036daa; border-bottom: 20px solid #038ddc; border-top: 20px solid #038ddc;}
ul li.subnav3 a{ background:#038ddc; border-bottom: 20px solid #41b4f6; border-top: 20px solid #41b4f6;}
ul li.last a{ background:#41b4f6; border-bottom: 20px solid #fff; border-top: 20px solid #fff;}
</style>
</head>
 
<body>
<ul class="breadnav">
    <li class="home"><a href="#">Home</a></li>
    <li class="subnav1"><a href="#">category</a></li>
    <li class="subnav2"><a href="#">prolist</a></li>
    <li class="subnav3"><a href="#">prodetail</a></li>
    <li class="last"><a href="#"></a></li>
</ul>
 
</body>
</html>
备注:该效果支持火狐、谷歌、Safari、IE8以上。设置导航半透明的话,直接设置外面的 li 的opacity值就可以了。




笔记作者:kittyyang

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


免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
赞赏作者
打赏作者 微信打赏
作者: 子恒 本文最后编辑于2014-7-22 12:07:46
子恒

前端工程师,emlog模版beginning开发者

作者的微博

发表评论

评论列表:

张小白
2017-08-04 10:20
oo