css——菱形菜单 有大用

.aa{
width: 150px;
 height:35px;
 -webkit-transform: skew(-40deg);
 -moz-transform: skew(-40deg);

 -o-transform: skew(-40deg);
 background:#9C3;
 color:#FFF;
 line-height:35px;}

得到的效果是这样的：
 

-------------------------------------------------------------------------------------------

那么，我们就利用border这个属性来写菱形菜单。


 

.nav{display:inline-block;float:left;display:block;height:0px;text-decoration:none;border-left:20px transparent dotted;border-bottom:20px green solid;border-top:0;position:relative;line-height:20px;color:#fff;font-size:12px;float:left;width:54px;}
 em{display:block;position:absolute; top:0px;left:50px;border-left:20px green solid;border-bottom:20px #fff solid;width:0;height:0;overflow:hidden;background:#fff;cursor:pointer;}
 .nav:hover{border-bottom:20px red solid;}
 .nav:hover em{border-left:20px red solid;}

------------------

<div>
<ul>
<li class="nav"><span>今日头条</span><em></em></li>

<li class="nav"><span>今日头条</span><em></em></li>

<li class="nav"><span>今日头条</span><em></em></li>

</ul>
</div>

效果如图：