CSS六边形菜单

CSS六边形菜单

六边形的菜单挺有意思，不过计算要准确，效果如下图：

代码如下：

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
 5  < title > 六边形菜单 </ title >
 6  < style  type ="text/css" >
 7  *  {
 8      margin : 0 ;
 9      padding : 0 ;
10  }
11  body  {
12      font : 13px/150% Georgia, "Times New Roman", Times, serif ;
13  }
14  #hex  {
15      width : 313px ;
16      margin : 10px auto ;
17      list-style : none ;
18  }
19  #hex:after  {
20      content : "" ;
21      height : 0 ;
22      clear : both ;
23      display : block ;
24      visibility : hidden ;
25  }
26  #hex li  {
27      float : left ;
28      margin-right : 4px ;
29      width : 100px ;
30      height : 110px ;
31      display : block ;
32      text-align : center ;
33  }
34  #hex li.p1  {
35      padding-left : 52px ;
36  }
37  #hex li.p2  {
38      margin-top : -27px ;
39  }
40  #hex li a:link, #hex li a:visited  {
41      text-decoration : none ;
42      text-transform : uppercase ;
43      color : #fff ;
44      outline : none ;
45  }
46  #hex li a b  {
47      display : block ;
48      height : 0 ;
49      width : 0 ;
50      overflow : hidden ;
51      border-bottom : 30px solid #000 ;
52      border-left : 50px dotted transparent ;
53      border-right : 50px dotted transparent ;
54      cursor : pointer ;
55  }
56  #hex li a span  {
57      display : block ;
58      height : 50px ;
59      background : #000 ;
60      line-height : 50px ;
61      cursor : pointer ;
62  }
63  #hex li a em  {
64      display : block ;
65      height : 0 ;
66      width : 0 ;
67      overflow : hidden ;
68      border-top : 30px solid #000 ;
69      border-left : 50px dotted transparent ;
70      border-right : 50px dotted transparent ;
71      cursor : pointer ;
72  }
73  #hex li a:hover  {
74      border : 0 ;
75      color : #000 ;
76  }
77  #hex li a:hover b  {
78      border-bottom-color : #ff0 ;
79  }
80  #hex li a:hover span  {
81      background-color : #ff0 ;
82  }
83  #hex li a:hover em  {
84      border-top-color : #ff0 ;
85  }
86  </ style >
87  </ head >
88  < body >
89  < ul  id ="hex" >
90     < li  class ="p1" >< a  href ="#" >< b ></ b >< span > home </ span >< em ></ em ></ a ></ li >
91     < li >< a  href ="#" >< b ></ b >< span > blog </ span >< em ></ em ></ a ></ li >
92     < li  class ="p2" >< a  href ="#" >< b ></ b >< span > about </ span >< em ></ em ></ a ></ li >
93     < li  class ="p2" >< a  href ="#" >< b ></ b >< span > help </ span >< em ></ em ></ a ></ li >
94     < li  class ="p2" >< a  href ="#" >< b ></ b >< span > faq </ span >< em ></ em ></ a ></ li >
95     < li  class ="p1 p2" >< a  href ="#" >< b ></ b >< span > shop </ span >< em ></ em ></ a ></ li >
96     < li  class ="p2" >< a  href ="#" >< b ></ b >< span > photo </ span >< em ></ em ></ a ></ li >
97  </ ul >
98  </ body >
99  </ html >

jimmy1985