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

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

示意图：

1、HTML结构

<body>

    <ul>

      <li>

        <span class="hex"><span class="hexIn">1</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">2</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">3</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">4</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">5</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">6</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">7</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">8</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">9</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">10</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">11</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">12</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">13</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">14</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">15</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">16</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">17</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">18</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">19</span></span>

      </li>

      <li>

        <span class="hex"><span class="hexIn">20</span></span>

      </li>

    </ul>

  </body>

　　每个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;

      }

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

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

.hexIn区域如图：

.hex区域如图：

li区域如图：

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

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

那么：

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

3、实现效果图

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

  1. 最近一个刚刚毕业的朋友说，他面试时候，遇到最频繁的css问题就是垂直居中，这里给出几种垂直居中方式！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js 基于可视区域 创建展示区域对应的经纬度二维数组

    本篇文章主要是分享下基于地图区域创建经纬度二维数组,需要的朋友可以过来参考下 接上个文章, 基于 地图区域,算出这个展示区域对应的点. 经纬度的变化关系:  XY页面展示上, 从左到右维度是增加 如: ...

  3. qt5-QWidget坐标系统和大小和展示区域

    #include "win.h" #include <QPushButton> #include <QLabel> #include <QDebug& ...

  4. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  5. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  6. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  7. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  8. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

随机推荐

  1. Hadoop 集群安装（从节点安装配置）

    1.Java环境配置 view plain copy sudo mv /tmp/java /opt/ jdk安装完配置环境变量,编辑/etc/profile: view plain copy sudo ...

  2. 【MyBatis源码分析】环境准备

    前言 之前一段时间写了[Spring源码分析]系列的文章,感觉对Spring的原理及使用各方面都掌握了不少,趁热打铁,开始下一个系列的文章[MyBatis源码分析],在[MyBatis源码分析]文章的 ...

  3. 字符串----HDU-1358

    题目大意:求字符串的前缀是否为周期串,若是,打印出循环节的长度以及循环次数. 这道题考察的是KMP算法中next数组的应用,必须理解透next[]数组代表的含义才t能通过它解决这道题.思路是先构造出 ...

  4. Redis基础入门，Redis的优点也特点，Redis五种数据类型

    Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. 1.Redis的主要特点 Redis有三个主要特点,使它优越于其它键值数据存储系统 - Redis将 ...

  5. SDL 开发实战（四）： SDL 事件处理

    在前面学习SDL的例子运行时,我们发现我们的窗口只停留了几秒,但是如果设置更长时间显然也有其他的弊端. 那么有没有一种好的办法可以解决这个问题呢?例如:能不能让窗口一直显示,直到检测到用户用鼠标点击关 ...

  6. Xapian使用入门

    关键字:搜索引擎.Xapian 一篇拖了两三年的入门总结文章,今天发出来,一方面是自己的总结,另一方面是给自己和他人的备忘.读者需要对搜索引擎有初步了解,譬如了解倒排.term.doc.相似度打分等概 ...

  7. 《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常

    2.1 概述 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又是执行最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任 ...

  8. C#版 - Leetcode 593. 有效的正方形 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  9. 华为oj之等差数列前n项和

    题目: 等差数列 热度指数:1010 时间限制:1秒 空间限制:32768K 题目描述 功能: 对于等差数列 2,5,8,11,14- 输入: 正整数N >0 输出: 求等差数列前N项和 返回: ...

  10. Linux上安装Zookeeper以及一些注意事项

    最近打算出一个系列,介绍Dubbo的使用. 分布式应用现在已经越来越广泛,Spring Could也是一个不错的一站式解决方案,不过据我了解国内目前貌似使用阿里Dubbo的公司比较多,一方面这个框架也 ...