纯纯CSS制作蜂巢效果详解制作蜂巢效果详解
导读：最近HTML5和CSS3是越来越普及，HTML5&CSS3不会在大分辨率显示屏上出现马赛克等优点也渐渐被人注意到。很
多网站都渐渐大量使用CSS3做网站美化，HTML5&CSS3的优秀作品层出不穷！甚至有的网站已经完全抛弃图片，仅使用
CSS和JavaScript创造出简介而又华丽的界面。下面是国外作者@jtauber的使用CSS创作蜂巢效果的技术介绍（上面是最终效
果图）：
height: 100px;
width: 100px;
border: 30px solid #999;
如果给每border附上不同的颜色的值：
height: 100px;
width: 100px;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;
现在把height属性删除，并且将div的width设置为0，效果如下：
width: 0;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;
删除border-top，再将border-left/border-right设置为透明：
width: 0;
border-bottom: 30px solid #6C6;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
两边的border不需要和bottom-border一样，bottom-border设置为30px，两边的52px，效果如下：
剩余7页未读，继续阅读
资源评论
