使用css绘制六边形

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

 

接下来，就是代码了：

 

CSS:

<style>
    #box1{width:0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }
    #box2{width: 104px;height: 60px;background-color: #6c6;}
    #box3{width:0;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>