css绘制六边形

CSS id选择器实现 正六边形

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

HTML代码：

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

CSS代码：

 #box1{0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }
    #box2{ 104px;height: 60px;background-color: #6c6;}
    #box3{0;border-top: 30px solid #6c6;border-left: 52px solid transparent;border-right: 52px solid transparent;}

CSS代码：

#box4{0;border-right: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}
#box5{ 60px;height: 104px;background-color: #6c6;float: left;}
#box6{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: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}