PNG虽然是好办法，但是因为做Z-INDEX，也不是很方便的，最好的办法就是CSS3来实现。
那个说不能实现那个，估计连CSS都不了解，即使用CSS2都可以实现，只是非常麻烦而且。
这是CSS3新属性实现的方法。
下面是CSS3实现几种多边形的代码，你复制，浏览一下就知道了。。。
附件是，CSS3实现的更多形状。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>css graph</title>
<style type="text/css" media="screen">
/*五边形*/
#pentagon {
position: relative
width: 54px
border-width: 50px 18px 0
border-style: solid
border-color: #f66 transparent
margin: 50px 0px 20px 20px
}
#pentagon:before {
content: ""
position: absolute
height: 0
width: 0
top: -85px
left: -18px
border-width: 0 45px 35px
border-style: solid
border-color: transparent transparent #f66
}
/*六边形*/
#hexagon {
width: 100px
height: 55px
background: #f66
position: relative
margin: 50px 0px 50px 20px
}
#hexagon:before {
content: ""
position: absolute
top: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #f66
}
#hexagon:after {
content: ""
position: absolute
bottom: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #f66
}
/*八边形*/
#octagon {
width: 100px
height: 100px
background: #f66
position: relative
}
#octagon:before {
content: ""
position: absolute
top: 0
left: 0
border-bottom: 29px solid #f66
border-left: 29px solid #fff
border-right: 29px solid #fff
width: 42px
height: 0
}
#octagon:after {
content: ""
position: absolute
bottom: 0
left: 0
border-top: 29px solid #f66
border-left: 29px solid #fff
border-right: 29px solid #fff
width: 42px
height: 0
}
</style>
</head>
<body>
<span style="font-size:27px">CSS graph</span>
<div id="pentagon"></div>五边形<br />
<div id="hexagon"></div>六边形<br />
<div id="octagon"></div>八边形<br />
</body>
</html>
1 <div id="box1"></div>2 <div id="box2"></div>3 <div id="box3"></div> #hexagon { 2 width: 100px 3 height: 55px 4 background: red 5 position: relative 6 } 7 #hexagon:before { 8 content: "" 9 position: absolute10 top: -25px11 left: 012 width: 013 height: 014 border-left: 50px solid transparent15 border-right: 50px solid transparent16 border-bottom: 25px solid red17 }18 #hexagon:after {19 content: ""20 position: absolute21 bottom: -25px22 left: 023 width: 024 height: 025 border-left: 50px solid transparent26 border-right: 50px solid transparent27 border-top: 25px solid red28 }
