六边形布局

小赵同学WoW
4 阅读2分钟

六边形布局

方案1：

实现说明：

目标：实现六边形布局

该文件实现的限制：

  1. 六边形大小固定，不受分辨率，浏览器缩放影响

  2. 奇数行比偶数行多一个元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <style>
      .wrap {
        width: 400px;
        height: 400px;
        outline: 1px solid red;
        margin: 100px auto;
      }

      .line {
        display: flex;
      }

      .line:nth-child(even) {
        transform: translateX(20px);
      }

      .line:not(:first-child) {
        margin-top: -6px;
      }

      .item {
        width: 40px;
        height: 40px;
        background-color: yellowgreen;
        clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      }

      .item:hover {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="line">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="line">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="line">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </body>
  <script>
    /* 
      实现说明：
      目标：实现六边形布局
      该文件实现的限制：
      1. 六边形大小固定，不受分辨率，浏览器缩放影响
      2. 奇数行比偶数行多一个元素
    */
  </script>
</html>

方案2：

实现说明：

目标：实现六边形布局

该文件实现的限制：

  1. 六边形大小不固定，body超出隐藏，六边形大小受分辨率，浏览器缩放影响，计算得出

  2. 奇数行与偶数行元素虽然一样多，但是奇数行最后一个元素看不见，因为body超出隐藏了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <style>
      :root {
        --size: calc(100vw / 9);
      }

      body {
        overflow: hidden;
      }

      .line {
        display: flex;
      }

      .line:nth-child(even) {
        transform: translateX(calc(-1 * var(--size) / 2));
      }

      .line:not(:first-child) {
        margin-top: calc(-1 * var(--size) / 6);
      }

      .item {
        width: var(--size);
        height: var(--size);
        background-color: yellowgreen;
        flex-shrink: 0;
        clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      }

      .item:hover {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="line">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <script>
    /* 
      实现说明：
      目标：实现六边形布局
      该文件实现的限制：
      1. 六边形大小不固定，body超出隐藏，六边形大小受分辨率，浏览器缩放影响，计算得出
      2. 奇数行与偶数行元素虽然一样多，但是奇数行最后一个元素看不见，因为body超出隐藏了
    */
  </script>
</html>
avatar
文章
阅读
粉丝