• 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>
    

      

  • 相关阅读:
    python_django_分页
    python_django_中间件
    python_django_静态文件
    Django项目基础配置和基本使用
    python_django__验证码
    python_django_The requested URL /sunck/login/sunck/showmain/ was not found on this server.错误
    python_django_template_url反向解析
    python_django_template模块
    Andrew Ng机器学习算法入门(一):简介
    Vue.js 条件语句
  • 原文地址:https://www.cnblogs.com/a-cat/p/9053884.html
Copyright © 2020-2023  润新知