怎样布局正六边形？
-->如果不能直接布局，就只能采用图形的组合。
-->既然是正六边形，则：

-->AB=2分之根号3乘2倍的边长，也就是对于矩形ABCD来说，AB是BD的根号3倍（也可以用正切算tan30deg）。这样的矩形旋转两次60deg，轨迹就恰好是一个正六边形。

-->事实上我们常常是要让它有一个完整背景的，如果只是搞三个块拧在一起，必然背景是不能一体的，

-->所以，我们的目标是：既要撑开其余四边，又要获得完整背景的。

-->达到背景一体的思路思路：把其中两块作为另一块的子元素，然后通过继承背景属性，来达到背景一体。

-->矛盾的突破：1，撑开其余四边的个体可以用两个等大矩形子元素同心旋转正负60deg;2,要保持背景的完整，对于每个旋转的矩形而言，设置能框住自身的的子元素并继承背景，就克服了角度旋转，而最便捷的，就是直接以正六边形直径作为边长的正方形。

-->实现的关键：背景继承background: inherit; 为了简洁必要，可以将负责背景拼合的连个子元素通过伪类来实现，然后过定位来实现上文的“框住”。

代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.  
  8. body{
  9.     padding:50px; background: #eee;
  10. }
  11.  
  12.         /* HEXAGON STARTS HERE */
  13.         .hex {
  14.             width:150px;
  15.             height:86px;
  16.             background-color: #ccc;
  17.             background-repeat: no-repeat;
  18.             background-position: 50% 50%;
  19.             -webkit-background-size: auto 173px;
  20.             position: relative;
  21.             float:left;
  22.             margin:25px 5px;
  23.             text-align:center;
  24.             zoom:1;
  25.         }
  26.  
  27.         .hex.hex-gap {
  28.             margin-left: 86px;
  29.         }
  30.  
  31.         .hex a {
  32.             display:block;
  33.             width: 100%;
  34.             height:100%;
  35.             text-indent:-9999em;
  36.             position:absolute;
  37.             top:0;
  38.             left:0;
  39.         }
  40.  
  41.         .hex .corner-1,
  42.         .hex .corner-2 {
  43.             position: absolute;
  44.             top:0;
  45.             left:0;
  46.             width:100%;
  47.             height:100%;
  48.             background: inherit;
  49.             z-index:-2;
  50.             overflow:hidden;
  51.             -webkit-backface-visibility: hidden;
  52.         }
  53.  
  54.         .hex .corner-1 {
  55.             z-index:-1;
  56.             -webkit-transform: rotate(60deg);
  57.         }
  58.  
  59.         .hex .corner-2 {
  60.             -webkit-transform: rotate(-60deg);
  61.         }
  62.  
  63.         .hex .corner-1:before,
  64.         .hex .corner-2:before {
  65.             width: 173px;
  66.             height:    173px;
  67.             content: '';
  68.             position: absolute;
  69.             top:0;
  70.             left: 0;
  71.             z-index: 1;
  72.             background: inherit;
  73.             background-repeat:no-repeat;
  74.             -webkit-backface-visibility: hidden;
  75.         }
  76.  
  77.         .hex .corner-1:before {
  78.             -webkit-transform: rotate(-60deg) translate(-87px, 0px);
  79.             -webkit-transform-origin: 0 0;
  80.         }
  81.  
  82.         .hex .corner-2:before {
  83.             -webkit-transform: rotate(60deg) translate(-48px, -11px);
  84.             bottom:0;
  85.         }
  86.  
  87. /*=======================================================*/
  88.         .hex.hex-1 {
  89.             background-image:url("http://www.16sucai.com/uploadfile/show2013/0605002/images/4.jpg");
  90.         }
  91.  
  92.         .hex.hex-2 {
  93.             background: #f5c53c;
  94.         }
  95.  
  96.         .hex.hex-3 {
  97.             background: #80b971;
  98.         }
  99.     </style>
  100. </head>
  101. <body>
  102.  
  103. <div class="hex hex-1 hex-gap">
  104.  
  105.     <div class="corner-1"></div>
  106.     <div class="corner-2"></div>
  107. </div>
  108.  
  109. <div class="hex hex-2">
  110.  
  111.     <a href="#"></a>
  112.     <div class="corner-1"></div>
  113.     <div class="corner-2"></div>
  114. </div>
  115.  
  116. <div class="hex hex-3">
  117.  
  118.     <a href="#"></a>
  119.     <div class="corner-1"></div>
  120.     <div class="corner-2"></div>
  121. </div>
  122.  
  123. </div>
  124. </body>
  125. </html>

css3--布局正六边形的更多相关文章

  1. Unity3D 正六边形，环状扩散，紧密分布，的程序

    最近在做一个正六边形的游戏,被一开始的布局难倒了. 需求:中心有个正六边形,输入围绕中心扩散的环数,自动创建和摆放. 大概就是这样的吧,我觉得这个非常轻松的就可以搞定了.啊~~~~~啊~~~ 五环~~ ...

  2. 正六边形网格化(Hexagonal Grids)原理与实现

    在路径规划.游戏设计栅格法应用中,正六边形网格不如矩形网格直接和常见,但是正六边形具有自身的应用特点,更适用于一些特殊场景中,比如旷阔的海洋.区域或者太空.本文主要讲述如何对正六边形进行几何学分析.网 ...

  3. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. ArcGIS中实现指定面积蜂窝（正六边形）方法

    本篇博文为博主(whgiser)原创,转载请注明. 空间聚集研究中,地理尺度大多数都是基于格网构建的,只需fishnet下就行了.也常有使用社区.交通小区(TZ)作为研究单元的.直到发现蜂窝网络做出的 ...

  5. 针对移动设备的CSS3布局

    针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

  6. 学习笔记 第十一章 CSS3布局基础

    第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形 ...

  7. #使用Python的turtle绘制正六边形、叠边形

    1.#Python的turtle绘制正六边形 代码: len=100 #表示边长像素 import turtle as t #正六边形内角都是120度,外角60度 for i in range(6): ...

  8. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  9. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

随机推荐

  1. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  2. Python学习---除法

    python有两种除法,普通除法 a/b ,不论a,b精度 得到的都是浮点数. 4/2 = 2.0    3/5 = 0.6 floor除法,a//b , 得到一个舍弃小数位的整数结果,所以结果永远是 ...

  3. Loading加载小插件,用户可以选择html格式或canvas格式，自定义loading图片，canvas色彩搭配可根据个人喜好

    ;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...

  4. ireport5.6+jasperreport6.3开发（四）--以javabean为基准的报表开发(ireport)

    javabean完成以后就是添加ireport的报表了 打开ireport的option然后在classpath中添加路径. 然后在ireport中追加数据源如图,点击图标后会出现数据源列表然后按ne ...

  5. Android开发之JavaMail发送邮件(用户反馈)

    给APP增加了一个用户反馈的小功能,由于懒的搭服务器,所以就用邮件的形式进行通信,有如下两种方式: 1.使用调用手机上的其他程序完成邮件发送 2.使用javamail进行邮件发送 这里果断使用java ...

  6. PHP加速处理插件 Zend Optimizer，Zend Guard Loader 和 Zend Opcache 区别

    PHP 5.3.X   以前版本 为  Zend Optimizer PHP 5.3.X   之后 更名为  Zend Guard Loader 可以帮助php执行加密后的php代码 安装实例以Ubu ...

  7. poj 2732 Countdown（East Central North America 2005）

    题意:建一个家庭树,找出有第d代子孙的名字,按照要求的第d代子孙的数从大到小输出三个人名,如果有一样大小子孙数的,就按字母序从小到大将同等大小的都输出,如果小于三个人的就全输出. 题目链接:http: ...

  8. SYSDBA身份登陆时可以修改其他用户的密码

    在以SYSDBA身份登陆时可以修改其他用户的密码,比如:SQL> alter user user01 identified by user10;用户已更改.这个是把USER01用户密码修改为US ...

  9. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  10. BZOJ AC800纪念

    貌似没什么好纪念的...QAQQQ 好不容易水到了800还是记录一下好了....不过感觉水这么多题没有意义啊[思考熊] 然后就没有然后了恩 不过我到底是为什么才努力的呢...前途一阵迷茫,根本没有什么 ...