多数情况下网站中出现的不规则形状多是由图片组成，当然现在通过CSS也可以实现圆角，下面我就来介绍一下通过CSS实现带箭头的导航条！

这些代码不用多做解释，都看得懂，重点是下面的CSS：

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, “新宋体”;}
/* demo */
.test{width:600px;margin:100px auto;background:#000;position:relative;}
.test ul{height:32px;overflow:hidden;}
.test li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;color:#fff;}
.test li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;}
.test li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #000;border-style:dashed dashed dashed solid;}
.test li.current{background:#f00;color:#fff;z-index:1;}
.test li.current i{border-color:transparent transparent transparent #f00;}

这其中很多都用到了相对定位和绝对定位的知识！

看一下最终效果

效果还不错，兼容性也是不错的，当前几大注流浏览器都是兼容的，在平时的建站过程中有这方面的需求，通过CSS来完成还是很好的！