【CSS3】---画几何图

<!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>