(3条消息)纯CSS制作蜂巢效果详解-CSDN.NET

导读：最近HTML5和CSS3是越来越普及，HTML5&CSS3不会在大分辨率显示屏上出现马赛克等优点也渐渐被人注意到。很多网站都渐渐大量使用CSS3做网站美化，HTML5&CSS3的优秀作品层出不穷！甚至有的网站已经完全抛弃图片，仅使用CSS和JavaScript创造出简介而又华丽的界面。下面是国外作者@jtauber的使用CSS创作蜂巢效果的技术介绍（左侧是最终效果图）：

这是一个100px × 100px，border为30px的div：

  1. height: 100px; 
  2. width: 100px; 
  3. border: 30pxsolid#999; 

如果给每border附上不同的颜色的值：

  1. height: 100px; 
  2. width: 100px; 
  3. border-top: 30pxsolid#C66; 
  4. border-bottom: 30pxsolid#6C6; 
  5. border-left: 30pxsolid#66C; 
  6. border-right: 30pxsolid#CC6; 

现在把height属性删除，并且将div的width设置为0，效果如下：

  1. width: 0; 
  2. border-top: 30pxsolid#C66; 
  3. border-bottom: 30pxsolid#6C6; 
  4. border-left: 30pxsolid#66C; 
  5. border-right: 30pxsolid#CC6; 

删除border-top，再将border-left/border-right设置为透明：

  1. width: 0; 
  2. border-bottom: 30pxsolid#6C6; 
  3. border-left: 30pxsolidtransparent; 
  4. border-right: 30pxsolidtransparent; 

两边的border不需要和bottom-border一样，bottom-border设置为30px，两边的52px，效果如下：

  1. width: 0; 
  2. border-bottom: 30pxsolid#6C6; 
  3. border-left: 52pxsolidtransparent; 
  4. border-right: 52pxsolidtransparent; 

如果用top-border替换bottom-border：

  1. width: 0; 
  2. border-top: 30pxsolid#6C6; 
  3. border-left: 52pxsolidtransparent; 
  4. border-right: 52pxsolidtransparent; 

在它们中创建一个104px × 60px的相同颜色的div你就能看到六边形的效果了：

  1. width: 0; 
  2. border-bottom: 30pxsolid#6C6; 
  3. border-left: 52pxsolidtransparent; 
  4. border-right: 52pxsolidtransparent; 
  5. width: 104px; 
  6. height: 60px; 
  7. background-color: #6C6; 
  8. width: 0; 
  9. border-top: 30pxsolid#6C6; 
  10. border-left: 52pxsolidtransparent; 
  11. border-right: 52pxsolidtransparent; 

以上是在CSS中制作出六边形效果的全部过程。两侧和上/下面的border width30:52的比例约等于1:√3  rat，也是为表现出六边形效果准备的。

下面提供一个简单的将六边形旋转30°。我们只需要旋转一下方向，使用float: left并且将width: 0属性删除。

  1. float: left; 
  2. border-right: 30pxsolid#6C6; 
  3. border-top: 52pxsolidtransparent; 
  4. border-bottom: 52pxsolidtransparent; 
  5. float: left; 
  6. width: 60px; 
  7. height: 104px; 
  8. background-color: #6C6; 
  9. float: left; 
  10. border-left: 30pxsolid#6C6; 
  11. border-top: 52pxsolidtransparent; 
  12. border-bottom: 52pxsolidtransparent; 

两种方向的六边形都可以很容易地拼贴在一起。第一种旋转方式的每个六边形上添加属性margin-left: 3px和margin-bottom: -26px，并且在偶数行还有margin-left: 53px。

  1. .hex { 
  2.     float: left; 
  3.     margin-left: 3px; 
  4.     margin-bottom: -26px; 
  5. } 
  6. .hex .top { 
  7.     width: 0; 
  8.     border-bottom: 30pxsolid#6C6; 
  9.     border-left: 52pxsolidtransparent; 
  10.     border-right: 52pxsolidtransparent; 
  11. } 
  12. .hex .middle { 
  13.     width: 104px; 
  14.     height: 60px; 
  15.     background: #6C6; 
  16. } 
  17. .hex .bottom { 
  18.     width: 0; 
  19.     border-top: 30pxsolid#6C6; 
  20.     border-left: 52pxsolidtransparent; 
  21.     border-right: 52pxsolidtransparent; 
  22. } 
  23. .hex-row { 
  24.     clear: left; 
  25. } 
  26. .hex-row.even { 
  27.     margin-left: 53px; 
  28. } 

第二种旋转方式的每个六边形上添加 margin-right: -26px和margin-bottom: -50px的属性在偶数列还有margin-top: 53px。

  1. .hex { 
  2.     float: left; 
  3.     margin-right: -26px; 
  4.     margin-bottom: -50px; 
  5. } 
  6. .hex .left { 
  7.     float: left; 
  8.     width: 0; 
  9.     border-right: 30pxsolid#6C6; 
  10.     border-top: 52pxsolidtransparent; 
  11.     border-bottom: 52pxsolidtransparent; 
  12. } 
  13. .hex .middle { 
  14.     float: left; 
  15.     width: 60px; 
  16.     height: 104px; 
  17.     background: #6C6; 
  18. } 
  19. .hex .right { 
  20.     float: left; 
  21.     width: 0; 
  22.     border-left: 30pxsolid#6C6; 
  23.     border-top: 52pxsolidtransparent; 
  24.     border-bottom: 52pxsolidtransparent; 
  25. } 
  26. .hex-row { 
  27.     clear: left; 
  28. } 
  29. .hex.even { 
  30.     margin-top: 53px; 
  31. } 

完成以上工作后还可以在.hex类添加以下代码再创造出3D透视效果。

  1. -webkit-transform: perspective(600px) rotateX(60deg); 
  2. -moz-transform: perspective(600px) rotateX(60deg); 
  3. -ms-transform: perspective(600px) rotateX(60deg); 
  4. -o-transform: perspective(600px) rotateX(60deg); 
  5. transform: perspective(600px) rotateX(60deg); 
  6. Addendum 

Will Hardy建议使用 :before和 :after来减少所需使用的div为1个。

  1. .hex:before { 
  2.     content: " "; 
  3.     width: 0; height: 0; 
  4.     border-bottom: 30pxsolid#6C6; 
  5.     border-left: 52pxsolidtransparent; 
  6.     border-right: 52pxsolidtransparent; 
  7.     position: absolute; 
  8.     top: -30px; 
  9. } 
  10. .hex { 
  11.     margin-top: 30px; 
  12.     width: 104px; 
  13.     height: 60px; 
  14.     background-color: #6C6; 
  15.     position: relative; 
  16. } 
  17. .hex:after { 
  18.     content: ""; 
  19.     width: 0; 
  20.     position: absolute; 
  21.     bottom: -30px; 
  22.     border-top: 30pxsolid#6C6; 
  23.     border-left: 52pxsolidtransparent; 
  24.     border-right: 52pxsolidtransparent; 
  25. } 

（本文为CSDN编译整理，未经允许不得转载。如需转载请联系market@csdn.net）

原文链接：jtauber.github.com

Original url: Access
Created at: 2019-03-22 12:11:45
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论