欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 11:04:03
网上已经有很多关于正六边形的CSS画法,主要是利用一个矩形和前后的两个三角形组合而成。 之前在看四维图新的官网的时候,发现了一种六边形的画法,比较适合多排六边形组合成蜂窝状的展示区域(注:四维图新现在改成了上面说的那种画法了)。 示意图: 1、HTML结构 每个li里包着.hex和.hexIn。.h ......

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

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

示意图:

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区域如图:CSS-蜂窝状展示区域(多个六边形)的一种实现方式

.hex区域如图:CSS-蜂窝状展示区域(多个六边形)的一种实现方式

li区域如图:CSS-蜂窝状展示区域(多个六边形)的一种实现方式

 

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

假设需要平行边距离为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(x+2m) }。比如第一排有6个,那么li:nth(11n+7) { ... }.

3、实现效果图

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

 

上一篇: 冬天是长膘的季节

下一篇: 求下联