• html css制作正六边形

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>首页title>
    8.   head>
    9.   <body>
    10.     <style>
    11.       * {
    12.           margin: 0;
    13.           padding: 0;
    14.           box-sizing: border-box;
    15.         }
    16.  
    17.         em,
    18.         i {
    19.             font-style: normal
    20.         }
    21.  
    22.  
    23.         li {
    24.             list-style: none
    25.         }
    26.  
    27.  
    28.         img {
    29.             border: 0;
    30.             vertical-align: middle
    31.         }
    32.  
    33.  
    34.         button {
    35.             cursor: pointer
    36.         }
    37.         a {
    38.             color: #666;
    39.             text-decoration: none
    40.         }
    41.         button,
    42.         input {
    43.             font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    44.             border: 0;
    45.             outline: none;
    46.         }
    47.         .none {
    48.             display: none
    49.         }
    50.  
    51.         .clearfix:after {
    52.             visibility: hidden;
    53.             clear: both;
    54.             display: block;
    55.             content: ".";
    56.             height: 0
    57.         }
    58.         .all div {
    59.             position: absolute;
    60.             color: #000;
    61.             display: flex;
    62.             align-items: center;
    63.             justify-content: center;
    64.             font-size: 40px;
    65.         }
    66.         .out {
    67.           position: relative;
    68.           width: 100%;
    69.           height: 100%;
    70.         }
    71.         .center {
    72.           position: absolute;
    73.           top: 50%;
    74.           left: 50%;
    75.           transform: translate(-50%,-50%);
    76.           z-index: 9;
    77.         }
    78.         .a {
    79.           position: absolute;
    80.           /* background-color:hotpink; */
    81.           /* border: 1px solid #000; */
    82.           width: 120px;
    83.           height: 120px;
    84.           cursor: pointer;
    85.           margin-top: -1px;
    86.         }
    87.         .one1 {
    88.            position: absolute;
    89.            top: 0px;
    90.             width:69.28px;
    91.             height: 120px;
    92.             border-top: 1px solid #000;
    93.             border-bottom: 1px solid #000;
    94.             /* background-color:green; */
    95.  
    96.         }
    97.         .one2 {
    98.            position: absolute;
    99.            top: 0px;
    100.             width: 69.28px;
    101.             height: 120px;
    102.             border-top: 1px solid #000;
    103.             border-bottom: 1px solid #000;
    104.             transform: rotate(-60deg);
    105.         }
    106.         .one3 {
    107.             position: absolute;
    108.             top: 0px;
    109.             width: 69.28px;
    110.             height: 120px;
    111.             border-top: 1px solid #000;
    112.             border-bottom: 1px solid #000;
    113.             transform: rotate(60deg);
    114.         }
    115.         ul li {
    116.           margin: 10px 0;
    117.           cursor: pointer;
    118.         }
    119.     style>
    120.     
    121.     <div
    122.       class="all page1"
    123.       style="width: 1000px;height: 600px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"
    124.     >
    125.       <div style="width: 100%;height: 100%;position: relative;">
    126.         
    127.         <div
    128.           class="a a1"
    129.           style="left: 50%;transform: translateX(-267px);top:0px;margin-left: 1px;"
    130.         >
    131.           <span class="center">A4span>
    132.           <div class="one1 noe">div>
    133.           <div class="one2 noe">div>
    134.           <div class="one3 noe">div>
    135.         div>
    136.         
    137.         <div
    138.           class="a a2"
    139.           style="left: 50%;transform: translateX(-267px);top:120px;margin-left: 1px;"
    140.         >
    141.           <span class="center">F3span>
    142.           <div class="one1 noe">div>
    143.           <div class="one2 noe">div>
    144.           <div class="one3 noe">div>
    145.         div>
    146.         
    147.         <div
    148.           class="a a3"
    149.           style="left: 50%;transform: translateX(-267px);top:240px;margin-left: 1px;"
    150.         >
    151.           <span class="center">L5span>
    152.           <div class="one1 noe">div>
    153.           <div class="one2 noe">div>
    154.           <div class="one3 noe">div>
    155.         div>
    156.         
    157.         <div
    158.           class="a a4"
    159.           style="left: 50%;transform: translateX(-267px);top:360px;margin-left: 1px;"
    160.         >
    161.           <span class="center">R5span>
    162.           <div class="one1 noe">div>
    163.           <div class="one2 noe">div>
    164.           <div class="one3 noe">div>
    165.         div>
    166.         
    167.         <div
    168.           class="a a5"
    169.           style="left: 50%;transform: translateX(-163px);top:60px;"
    170.         >
    171.           <span class="center">B3span>
    172.           <div class="one1 noe">div>
    173.           <div class="one2 noe">div>
    174.           <div class="one3 noe">div>
    175.         div>
    176.         
    177.         <div
    178.           class="a a6"
    179.           style="left: 50%;transform: translateX(-163px);top:180px;"
    180.         >
    181.           <span class="center">G2span>
    182.           <div class="one1 noe">div>
    183.           <div class="one2 noe">div>
    184.           <div class="one3 noe">div>
    185.         div>
    186.         
    187.         <div
    188.           class="a a7"
    189.           style="left: 50%;transform: translateX(-163px);top:300px;"
    190.         >
    191.           <span class="center">T5span>
    192.           <div class="one1 noe">div>
    193.           <div class="one2 noe">div>
    194.           <div class="one3 noe">div>
    195.         div>
    196.         
    197.         <div
    198.           class="a a8"
    199.           style="left: 50%;transform: translateX(-163px);top:420px;"
    200.         >
    201.           <span class="center">S5span>
    202.           <div class="one1 noe">div>
    203.           <div class="one2 noe">div>
    204.           <div class="one3 noe">div>
    205.         div>
    206.         
    207.         <div class="a a9" style="left: 50%;transform: translateX(-50%);top: 0;">
    208.           <div class="out">div>
    209.           <span class="center">C2span>
    210.           <div class="one1 noe">div>
    211.           <div class="one2 noe">div>
    212.           <div class="one3 noe">div>
    213.         div>
    214.         
    215.         <div
    216.           class="a a10"
    217.           style="left: 50%;transform: translateX(-50%);top: 120px;"
    218.         >
    219.           <span class="center">H3span>
    220.           <div class="one1 noe">div>
    221.           <div class="one2 noe">div>
    222.           <div class="one3 noe">div>
    223.         div>
    224.         
    225.         <div
    226.           class="a a11"
    227.           style="left: 50%;transform: translateX(-50%);top: 240px;"
    228.         >
    229.           <span class="center">N4span>
    230.           <div class="one1 noe">div>
    231.           <div class="one2 noe">div>
    232.           <div class="one3 noe">div>
    233.         div>
    234.         
    235.         <div
    236.           class="a a12"
    237.           style="left: 50%;transform: translateX(-50%);top:360px;"
    238.         >
    239.           <span class="center">W5span>
    240.           <div class="one1 noe">div>
    241.           <div class="one2 noe">div>
    242.           <div class="one3 noe">div>
    243.         div>
    244.         
    245.         <div
    246.           class="a a13"
    247.           style="left: 50%;transform: translateX(43px);top:60px;"
    248.         >
    249.           <span class="center">D7span>
    250.           <div class="one1 noe">div>
    251.           <div class="one2 noe">div>
    252.           <div class="one3 noe">div>
    253.         div>
    254.         
    255.         <div
    256.           class="a a14"
    257.           style="left: 50%;transform: translateX(43px);top:180px;"
    258.         >
    259.           <span class="center">J7span>
    260.           <div class="one1 noe">div>
    261.           <div class="one2 noe">div>
    262.           <div class="one3 noe">div>
    263.         div>
    264.         
    265.         <div
    266.           class="a a15"
    267.           style="left: 50%;transform: translateX(43px);top:300px;"
    268.         >
    269.           <span class="center">P7span>
    270.           <div class="one1 noe">div>
    271.           <div class="one2 noe">div>
    272.           <div class="one3 noe">div>
    273.         div>
    274.         
    275.         <div
    276.           class="a a16"
    277.           style="left: 50%;transform: translateX(43px);top:420px;"
    278.         >
    279.           <span class="center">X3span>
    280.           <div class="one1 noe">div>
    281.           <div class="one2 noe">div>
    282.           <div class="one3 noe">div>
    283.         div>
    284.         
    285.         <div
    286.           class="a a17"
    287.           style="left: 50%;transform: translateX(147px);top:0px;margin-left: -1px;"
    288.         >
    289.           <span class="center">E9span>
    290.           <div class="one1 noe">div>
    291.           <div class="one2 noe">div>
    292.           <div class="one3 noe">div>
    293.         div>
    294.         
    295.         <div
    296.           class="a a18"
    297.           style="left: 50%;transform: translateX(147px);top:120px;margin-left: -1px;"
    298.         >
    299.           <span class="center">K8span>
    300.           <div class="one1 noe">div>
    301.           <div class="one2 noe">div>
    302.           <div class="one3 noe">div>
    303.         div>
    304.         
    305.         <div
    306.           class="a a19"
    307.           style="left: 50%;transform: translateX(147px);top:240px;margin-left: -1px;"
    308.         >
    309.           <span class="center">Q4span>
    310.           <div class="one1 noe">div>
    311.           <div class="one2 noe">div>
    312.           <div class="one3 noe">div>
    313.         div>
    314.         
    315.         <div
    316.           class="a a20"
    317.           style="left: 50%;transform: translateX(147px);top:360px;margin-left: -1px;"
    318.         >
    319.           <span class="center">Z2span>
    320.           <div class="one1 noe">div>
    321.           <div class="one2 noe">div>
    322.           <div class="one3 noe">div>
    323.         div>
    324.       div>
    325.     div>
    326.   body>
    327. html>

  • 相关阅读:
    在线渲染3d怎么用？3d快速渲染步骤设置
    操作系统—内核态和用户态
    浅谈新生代为什么要分三块区域并且比例为什么是8:1:1
    android读取sd卡上文件中的数据
    【开源】基于Vue.js的校园二手交易系统的设计和实现
    XUbuntu22.04之解决桌面突然放大,屏幕跟着鼠标移动问题(一百九十)
    JVM核心参数图解-整理
    爬虫（9） - Scrapy框架(1) | Scrapy 异步网络爬虫框架
    C Primer Plus(6) 中文版 第2章 C语言概述 2.1 简单的C程序示例
    [2022-11-28]神经网络与深度学习 hw10 - LSTM和GRU
  • 原文地址：https://blog.csdn.net/qq_43770056/article/details/133157128