标签：
<!DOCTYPE html> <html> <head> <style> .nav ul{ width:980px; margin:0px auto 0px auto; list-style-type:none; } a{ position:relative; width:60px; height:28px; line-height:28px; border:1px solid #ccc; color:#ccc; font-size:12px; display:block; text-align:center; text-decoration:none; float:left; background-color:#fff;} .w{ float:left; background-color:#ccc; shape-outside:polygon(0 0,50px 0px,60px 14px,50px 28px,0 28px,10px 14px); -webkit-clip-path:polygon(0 0,50px 0px,60px 14px,50px 28px,0 28px,10px 14px); } .w1{ float:left; background-color:#ccc; shape-outside:polygon(0 0,50px 0px,60px 14px,50px 28px,0 28px); -webkit-clip-path:polygon(0 0,50px 0px,60px 14px,50px 28px,0 28px); } .w7{ float:left; background-color:#ccc; shape-outside:polygon(0 0,60px 0px,60px 28px,0 28px,10px 14px); -webkit-clip-path:polygon(0 0,60px 0px,60px 28px,0 28px,10px 14px); } .w a{ shape-outside:polygon(1px 1px,50px 1px,59px 14px,50px 27px,1px 27px,11px 14px); -webkit-clip-path:polygon(1px 1px,50px 1px,59px 14px,50px 27px,1px 27px,11px 14px); } .w1 a{ float:left; background-color:#fff; shape-outside:polygon(1px 1px,50px 1px,59px 14px,50px 27px,1px 27px); -webkit-clip-path:polygon(1px 1px,50px 1px,59px 14px,50px 27px,1px 27px); } .w7 a{ float:left; background-color:#fff; shape-outside:polygon(1px 1px,59px 1px,59px 27px,1px 27px,11px 14px); -webkit-clip-path:polygon(1px 1px,59px 1px,59px 27px,1px 27px,11px 14px); } .nav ul li:hover{ background:blue; } .nav ul li:hover a{ width:60px; height:28px; line-height:28px; border:1px solid red; color:#fff; background:red; } </style> </head> <body> <div class="nav"> <ul> <li class="w1"><a href="#">周一</a></li> <li class="w"><a href="#">周二</a></li> <li class="w"><a href="#">周三</a></li> <li class="w"><a href="#">周四</a></li> <li class="w"><a href="#">周五</a></li> <li class="w"><a href="#">周六</a></li> <li class="w7"><a href="#">周日</a></li> </ul> </body> </html>
标签：
原文地址：http://www.cnblogs.com/xuan-0107/p/4832821.html
