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

-->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. TAP/TUN（二）

    tap.c代码      #include<assert.h> #include<fcntl.h> #include<stdio.h> #include<st ...

  2. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  3. 关于malloc的一些想法

    之前一段时间翻阅过一些内存分配的资料,这次终于能将其整理记录下来了. c标准库里有两个耳熟能详的函数,用于对堆空间的内存进行分配和释放,它们分别是: malloc.负责分配一个指定大小的一块内存给调用 ...

  4. swift_初始化器的使用

    //: Playground - noun: a place where people can play import Cocoa ***************************结构体与Cla ...

  5. webp性能测评

    一.测评目的 通过分析webp图片在不同条件下的性能表现,来确定webp图片的适用场景. 二.测评方式 使用控制变量法,分别从以下3点对webp与jpg图片做对比,得出结论. 1.页面图片总体积. 2 ...

  6. C/C++面试题总结

    腾讯阿里面试题总结:1. 多态机制2. 排序算法(快排.堆排)3. 程序内存分配4. unix多线程5. 哈希查找6. oop特点7. 素数(优化)8. 字符串掩膜操作(内存紧凑)9. 多边形相交10 ...

  7. C# 反射浅析

    反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表,这个列表包括给定类型中定义的方法.字段.属性和事件.此外,通过反射也可以动态的发现一组给定类支持的接口.方法的参数 ...

  8. httpd服务的安装、配置和关于php留言本网站的搭建

    搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html yum install httpd -y #安装httpd yum install ...

  9. Java—图形处理

    抽象窗口化工具(AWT)为图形用户界面编程提供API编程接口,使得Java可以提供较好的图形用户界面. AWT把图形处理分为两个层次:一是处理原始图形,这一层较原始,图形直接以点.线和面的形式画到界面 ...

  10. UITableView UITableViewCell

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...