前端纯css transform 实现蜂窝图布局

猫宅子

已于 2024-07-16 10:10:28 修改

阅读量521

点赞数 10

文章标签： css 前端

于 2024-07-12 16:14:36 首次发布

本文链接：https://blog.youkuaiyun.com/T797877/article/details/140381221

版权

问题描述

要求进行蜂窝图布局，找遍百度，记录。

形状一、

作者讲解非常详细，转https://www.cnblogs.com/zczhangcui/p/10300090.html

形状二、

可是给我的设计图是旋转45°的正六边形，如图

终于，在大佬的思路下，想到一种思路。

形状一，作者是通过一个菱形进行切割，我如果再加一个呢，如图

通过span和overflow进行补色

再进行一下li和span位置和方向的微调，搞定，如图

css、

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

html、

<ul>
      <li>
        <span class="hex"><span class="hexIn"><span>1<span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>2</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>3</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>4</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>5</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>6</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>7</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>8</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>9</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>10</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>11</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>12</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>13</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>14</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>15</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>16</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>17</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>18</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>19</span></span></span>
      </li>
      <li>
        <span class="hex"><span class="hexIn"><span>20</span></span></span>
      </li>
    </ul>