html css制作正六边形

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
  </head>
  <body>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        em,
        i {
            font-style: normal
        }


        li {
            list-style: none
        }


        img {
            border: 0;
            vertical-align: middle
        }


        button {
            cursor: pointer
        }
        a {
            color: #666;
            text-decoration: none
        }
        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            border: 0;
            outline: none;
        }
        .none {
            display: none
        }

        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }
        .all div {
            position: absolute;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        .out {
          position: relative;
          width: 100%;
          height: 100%;
        }
        .center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 9;
        }
        .a {
          position: absolute;
          /* background-color:hotpink; */
          /* border: 1px solid #000; */
          width: 120px;
          height: 120px;
          cursor: pointer;
          margin-top: -1px;
        }
        .one1 {
           position: absolute;
           top: 0px;
            width:69.28px;
            height: 120px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            /* background-color:green; */

        }
        .one2 {
           position: absolute;
           top: 0px;
            width: 69.28px;
            height: 120px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(-60deg);
        }
        .one3 {
            position: absolute;
            top: 0px;
            width: 69.28px;
            height: 120px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(60deg);
        }
        ul li {
          margin: 10px 0;
          cursor: pointer;
        }
    </style>
    <!-- 第一页 -->
    <div
      class="all page1"
      style="width: 1000px;height: 600px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"
    >
      <div style="width: 100%;height: 100%;position: relative;">
        <!-- A4 -->
        <div
          class="a a1"
          style="left: 50%;transform: translateX(-267px);top:0px;margin-left: 1px;"
        >
          <span class="center">A4</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- F3 -->
        <div
          class="a a2"
          style="left: 50%;transform: translateX(-267px);top:120px;margin-left: 1px;"
        >
          <span class="center">F3</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- L5 -->
        <div
          class="a a3"
          style="left: 50%;transform: translateX(-267px);top:240px;margin-left: 1px;"
        >
          <span class="center">L5</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- R5 -->
        <div
          class="a a4"
          style="left: 50%;transform: translateX(-267px);top:360px;margin-left: 1px;"
        >
          <span class="center">R5</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- B3 -->
        <div
          class="a a5"
          style="left: 50%;transform: translateX(-163px);top:60px;"
        >
          <span class="center">B3</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- G2 -->
        <div
          class="a a6"
          style="left: 50%;transform: translateX(-163px);top:180px;"
        >
          <span class="center">G2</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- T5 -->
        <div
          class="a a7"
          style="left: 50%;transform: translateX(-163px);top:300px;"
        >
          <span class="center">T5</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- S5 -->
        <div
          class="a a8"
          style="left: 50%;transform: translateX(-163px);top:420px;"
        >
          <span class="center">S5</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- C2 -->
        <div class="a a9" style="left: 50%;transform: translateX(-50%);top: 0;">
          <div class="out"></div>
          <span class="center">C2</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- H3 -->
        <div
          class="a a10"
          style="left: 50%;transform: translateX(-50%);top: 120px;"
        >
          <span class="center">H3</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- N4 -->
        <div
          class="a a11"
          style="left: 50%;transform: translateX(-50%);top: 240px;"
        >
          <span class="center">N4</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- W5 -->
        <div
          class="a a12"
          style="left: 50%;transform: translateX(-50%);top:360px;"
        >
          <span class="center">W5</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- D7 -->
        <div
          class="a a13"
          style="left: 50%;transform: translateX(43px);top:60px;"
        >
          <span class="center">D7</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- J7 -->
        <div
          class="a a14"
          style="left: 50%;transform: translateX(43px);top:180px;"
        >
          <span class="center">J7</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- P7 -->
        <div
          class="a a15"
          style="left: 50%;transform: translateX(43px);top:300px;"
        >
          <span class="center">P7</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- X3 -->
        <div
          class="a a16"
          style="left: 50%;transform: translateX(43px);top:420px;"
        >
          <span class="center">X3</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- E9 -->
        <div
          class="a a17"
          style="left: 50%;transform: translateX(147px);top:0px;margin-left: -1px;"
        >
          <span class="center">E9</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- K8 -->
        <div
          class="a a18"
          style="left: 50%;transform: translateX(147px);top:120px;margin-left: -1px;"
        >
          <span class="center">K8</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- Q4 -->
        <div
          class="a a19"
          style="left: 50%;transform: translateX(147px);top:240px;margin-left: -1px;"
        >
          <span class="center">Q4</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
        <!-- Z2 -->
        <div
          class="a a20"
          style="left: 50%;transform: translateX(147px);top:360px;margin-left: -1px;"
        >
          <span class="center">Z2</span>
          <div class="one1 noe"></div>
          <div class="one2 noe"></div>
          <div class="one3 noe"></div>
        </div>
      </div>
    </div>
  </body>
</html>