CSS-蜂窝状展示区域（多个六边形）的一种实现方式

ideaa 发布于2019-04-23 11:52 / 1232人阅读

摘要：网上已经有很多关于正六边形的画法，主要是利用一个矩形和前后的两个三角形组合而成。是内容区，是一个菱形切割区，将切割成六边形。的高度，多排六边形的情况下，的高度与排与排之间的间隙有关。的高度，六边形对应顶点间的距离。

网上已经有很多关于正六边形的CSS画法，主要是利用一个矩形和前后的两个三角形组合而成。

之前在看四维图新的官网的时候，发现了一种六边形的画法，比较适合多排六边形组合成蜂窝状的展示区域（注：四维图新现在改成了上面说的那种画法了）。

示意图：

1、HTML结构

　　每个li里包着.hex和.hexIn。.hexIn是内容区，.hex是一个菱形切割区，将.hexIn切割成六边形。具体看css。

2、CSS

      ul {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 560px;
        margin: 100px auto;
      }
      li {
        float: left;
        margin: 0 5px;
        height: 96px;
      }
      .hex {
        overflow: hidden;
        display: block;
        width: 100px;
        height: 116px;
        transform: rotate(-60deg) skewY(30deg);
      }
      .hexIn {
        background-color: #ccc;
        display: block;
        width: 100px;
        height: 116px;
        line-height: 116px;
        text-align: center;
        transform: skewY(-30deg) rotate(60deg);
      }
      li:nth-child(9n + 6) {
        margin-left: 60px;
      }

　　里面有几个关键的长度和宽度：

li的宽度，li的宽度由内部元素撑开。
li的高度，多排六边形的情况下，li的高度与排与排之间的间隙有关。
.hex的宽度，即六边形平行边之间的距离。
.hex的高度，六边形对应顶点间的距离。
.hexIn的高度和宽度同.hex。

.hexIn区域如图：

.hex区域如图：

li区域如图：

根据以上的宽度和高度说明，以上数值都要满足一定的关系，直接说结论：

假设需要平行边距离为w的六边形，每个六边形之间的间隔为m。

那么：

li的高度：0.866(w+m)
.hex的宽度：w，高度：1.155w
.hexIn同上
如果第一排有x个六边形，那么为实现相邻两排交错排列的效果，需要设置：li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6个，那么li:nth(11n+7) { ... }.

3、实现效果图

GPU云服务器云服务器 ftp是属于一种网站发布方式数据展示方式 css js数据可视化展示多个快捷方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1282.html

JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
CSS学习笔记(十五) 使用map标签实现单图多热点

摘要：标签中的属性可引用的标签中的或属性取决于浏览器，所以我们应同时向标签添加和属性。首先用得到几个坐标然后代码实现就是这样。定义三角形至少需要三组坐标高纬多边形则需要更多数量的顶点。来源：js中图片点击区域的实现 - javascript - SegmentFault map标签定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 are...

EscapedDog 2019-08-28 18:06 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

wall2flower 2019-07-01 14:02 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

余学文 2019-06-28 17:25 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

desdik 2019-08-23 18:14 评论0 收藏0