<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>
css不同的多边形的层写法是不同的。
一、梯形代码：
.triangle {border-bottom: 100px solid #F36823
border-left: 50px solid transparent
border-right: 50px solid transparent
height: 0
width: 100px
}
二、六角星代码：
.triangle{width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
position: relative
}
.triangle:after {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
position: absolute
content: ""
top: 30px
left: -50px
}
3、五角星代码：
.triangle{margin: 50px 0
position: relative
display: block
color: #F36823
width: 0px
height: 0px
border-right: 100px solid transparent
border-bottom: 70px solid #F36823
border-left: 100px solid transparent
-moz-transform: rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
.triangle:before {
border-bottom: 80px solid #F36823
border-left: 30px solid transparent
border-right: 30px solid transparent
position: absolute
height: 0
width: 0
top: -45px
left: -65px
display: block
content: ''
-webkit-transform: rotate(-35deg)
-moz-transform: rotate(-35deg)
-ms-transform: rotate(-35deg)
-o-transform: rotate(-35deg)
}
.triangle:after {
position: absolute
display: block
color: #F36823
top: 3px
left: -105px
width: 0px
height: 0px
border-right: 100px solid transparent
border-bottom: 70px solid #F36823
border-left: 100px solid transparent
-webkit-transform: rotate(-70deg)
-moz-transform: rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
content: ''
}
4、六边形代码：
.triangle{width: 100px
height: 55px
background: #F36823
position: relative
}
.triangle: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 #F36823
}
.triangle: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 #F36823
}
多边形是可以设置圆角，但如果五边形和六边形是由三角形和四边形组合而成，不建议设置圆角，设置后，达不到理想效果，不过四边形和八边形是可以的，也可以组装。
代码如下，供参考，请在IE9或Chrome上运行：
<html><head>
<title>多边形圆角</title>
<style>
#parallelogram{
width: 200px
height: 100px
margin-left: 30px
-webkit-transform: skew(-30deg)
-moz-transform: skew(200deg)
-o-transform: skew(200deg)
background-color: red
border-radius:10px
}
#burst-8{
width: 80px
height: 80px
background-color: red
text-align: center
position: relative
top:100px
left:100px
transform:rotate(20deg)
-webkit-transform:rotate(20deg)
-ms-transform:rotate(20deg)
-moz-transform:rotate(20deg)
-o-transform:rotate(20deg)
border-radius:10px
}
#burst-8:before{
width: 80px
height: 80px
top: 0
left: 0
background-color: red
position: absolute
content: ""
transform:rotate(135deg)
-webkit-transform:rotate(135deg)
-ms-transform:rotate(135deg)
-moz-transform:rotate(135deg)
-o-transform:rotate(135deg)
border-radius:10px
}
</style>
</head>
<body>
<div id="parallelogram">五边形圆角为10px，在IE9或Chrome上运行</div>
<div id="burst-8">八边形</div>
</body>
</html>
