zoukankan      html  css  js  c++  java
  • css实现等边六边形

    在平时的页面布局中,我们也会经常碰到蜂窝煤类型的模块:

     

    那么我们把他拆开,就是单个的六边形,如何用css去实现一个六边形呢?下面是我用绘图软件绘制的css实现六边形的步骤:

     

    具体的html代码如下:

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
          .list{
             200px;
            height: 250px;
            overflow: hidden;
            transform: rotate(120deg);
            margin: 200px;
          }
          .list_child{
             100%;
            height: 100%;
            overflow: hidden;
            transform: rotate(-60deg);
          }
          .list_child_child{
    	     100%;
    	    height: 100%;
    	    overflow: hidden;
    	    transform: rotate(-60deg);
    	    background-color: red;
          }
        </style>
      </head>
      <body>
        <div class="list">
          <div class="list_child">
            <div class="list_child_child"></div>
          </div>
        </div>
      </body>
    </html>
    

      

  • 相关阅读:
    MySQL8.0.x免安装配置
    Java中锁的实现与内存语义
    并发中的volatile
    「LOJ #2163」「POI2011」Tree Rotations
    「CodeChef REBXOR」Nikitosh and xor
    「Codeforces 429D」Destiny
    「Luogu P2042」「NOI2005」维护数列
    「SPOJ SEQ」 Recursive Sequence
    「GCJ 2008 Round 1A C」numbers
    「LOJ #6016」崂山白花蛇草水
  • 原文地址:https://www.cnblogs.com/a-cat/p/9053884.html
Copyright © 2011-2022 走看看