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