首页风格
门户
博客

使用CSS开发一个扁平风格的面包屑样式当前位置

日期:2013-10-30  来源:GBin1.com

使用CSS开发一个扁平风格的面包屑样式当前位置

使用的技巧和前面的动画生成三角形类似,如下:

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a {
display: block;
float: left;
height: 50px;
background: #3498db;
text-align: center;
padding: 30px 40px 0 40px;
position: relative;
margin: 0 10px 0 0; font-size: 20px;
text-decoration: none;
color: #fff;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a:after {
content: "";
border-top: 40px solid red;
border-bottom: 40px solid red;
border-left: 40px solid blue;
position: absolute; right: -40px; top: 0;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #d4f2ff;
position: absolute; left: 0; top: 0;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

padding: 30px 40px 0 80px;

使用CSS开发一个扁平风格的面包屑样式当前位置

<div id="crumbs">
<ul>
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
<li><a href="#3">Three</a></li>
<li><a href="#4">Four</a></li>
<li><a href="#5">Five</a></li>
</ul>
</div>

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
display: none;
} #crumbs ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
} #crumbs ul li:last-child a:after {
display: none;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a:hover {
background: #fa5ba5;
}
#crumbs ul li a:hover:after {
border-left-color: #fa5ba5;
}

via 极客标签

来源:使用CSS开发一个扁平风格的面包屑样式当前位置

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐