运用before 、after、border-color、border 编织ribbon

此文关于如何利用border、border-color、绝对定位，绘制特殊形状的三角形。

在网上经常看到别人制作的非长方形的导航条，这里借鉴学习制作一个，仅作练习，注意：最新的火狐、遨游、谷歌等浏览器支持，ie9及ie以下不支持，ie10暂未测试。

下面是html部分：

<div class="nav"><ul><li><a href="http://www.cnblogs.com/web-sheena">首页</a></li><li><a href="http://www.cnblogs.com/web-sheena">活动</a></li><li><a href="http://www.cnblogs.com/web-sheena">基金</a></li><li><a href="http://www.cnblogs.com/web-sheena">同城</a></li><li><a href="http://www.cnblogs.com/web-sheena">学校</a></li></ul></div>

css3代码部分：

.nav_warp{margin:20px auto;position:relative;z-index:1;padding:50px 0;width:960px;background:#fff; border-radius:0 10px 0 10px;-moz-border-radius:0 10px 0 10px;-webkit-border-radius:0 10px 0 10px;box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
.nav{width:960px;background: hsla(315,40%,60%,1);font:bold 16px/48px "微软雅黑", "宋体" ;position:relative;box-shadow: 0 0 10px rgba(0,0,0,.2),0 0 10px rgba(0,0,0,.1) inset;text-shadow: 1px 10px 10px hsla(20,50%,30%,0.4)}
.nav::before,.nav::after{content:"";position: absolute;width: 0;height:0;border: 24px solid hsla(315,30%,60%,0.8);top:10px;z-index: -1;}
.nav::before{border-left-color:transparent ;right:100%;margin-right:-10px;}
.nav::after{border-right-color:transparent;left:100%;margin-left:-10px;}
.nav ul::before,.nav ul::after{position:absolute;z-index:1;border:5px solid transparent;content:"";top:100%;height:0;widht:0;}
.nav ul::before{border-color: hsla(315,28%,50%,0.95) hsla(315,28%,50%,0.95) transparent transparent;left:0;}
.nav ul::after{border-color: hsla(315,28%,50%,0.95) transparent transparent hsla(315,28%,50%,0.95);right:0;}
.nav ul{text-align:center;}
.nav ul li {display:inline;line-height:48px;padding:0 40px;}
.nav ul li a{color:#fff; text-decoration:none;}

 

测试效果如图：

ps：可以再添加一些其他的效果：“首页”等链接文字当鼠标在上面的效果，这里就做到这里。