使用css绘制六边形

用css绘制六边形需要使用到三个容器，分别用于绘制六边形的三个部分，如下图所示：

接下来，就是代码了：

CSS:

;;border-top: 30px solid #6c6;border-left: 52px solid transparent;border-right: 52px solid transparent;}

<div id="box1"></div>
<div id="box2"></div>

<div id="box3"></div>

</style>

如果做成下面这种形状，可以将上面做的进行旋转或者采用浮动的方式：

代码：

#box4{width:0;border-right: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}
#box5{width: 60px;height: 104px;background-color: #6c6;float: left;}
#box6{width:0;border-left: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}

<div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>