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

参考：

​​CSS3—绘制六边形​​