使用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 >