css绘制六边形

CSS id选择器实现 正六边形

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

HTML代码：

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

CSS代码：

 #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;}

CSS代码：

 #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;}

HTML代码：

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

CSS3 为元素实现:

 #hexagon {
     width: 100px;
     height: 55px;
     background: red;
     position: relative;
 }
 #hexagon:before {
     content: "";
     position: absolute;
     top: -25px;
     left:;
     width:;
     height:;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 25px solid red;
 }
 #hexagon:after {
     content: "";
     position: absolute;
     bottom: -25px;
     left:;
     width:;
     height:;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 25px solid red;
 }