[html5]CSS3画正六边形的方法与源代码实例

[html5]CSS3画正六边形的方法与源代码实例

经常在别人家的网页上看到各中好看图形，其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下，网页上有哪些姿势实现这个效果

<div class="lb01"></div>

/*css*/ 
.lb01 { 
    position: relative; 
    width: 200px; 
    height: 120px; 
    background-color: red; 
    margin: 100px; 
} 
.lb01:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    top: -160px; 
    width: 0; 
    height: 0; 
    border: 100px solid transparent; 
    border-bottom: 60px solid red; 
} 
.lb01:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    bottom: -160px; 
    width: 0; 
    height: 0; 
    border: 100px solid transparent; 
    border-top: 60px solid red; 
}