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

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

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

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

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

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

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

代码实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

body{

    padding:50px; background: #eee;

}

        /* HEXAGON STARTS HERE */

        .hex {

            width:150px;

            height:86px;

            background-color: #ccc;

            background-repeat: no-repeat;

            background-position: 50% 50%;

            -webkit-background-size: auto 173px;

            position: relative;

            float:left;

            margin:25px 5px;

            text-align:center;

            zoom:1;

        }

        .hex.hex-gap {

            margin-left: 86px;

        }

        .hex a {

            display:block;

            width: 100%;

            height:100%;

            text-indent:-9999em;

            position:absolute;

            top:0;

            left:0;

        }

        .hex .corner-1,

        .hex .corner-2 {

            position: absolute;

            top:0;

            left:0;

            width:100%;

            height:100%;

            background: inherit;

            z-index:-2;

            overflow:hidden;

            -webkit-backface-visibility: hidden;

        }

        .hex .corner-1 {

            z-index:-1;

            -webkit-transform: rotate(60deg);

        }

        .hex .corner-2 {

            -webkit-transform: rotate(-60deg);

        }

        .hex .corner-1:before,

        .hex .corner-2:before {

            width: 173px;

            height:    173px;

            content: '';

            position: absolute;

            top:0;

            left: 0;

            z-index: 1;

            background: inherit;

            background-repeat:no-repeat;

            -webkit-backface-visibility: hidden;

        }

        .hex .corner-1:before {

            -webkit-transform: rotate(-60deg) translate(-87px, 0px);

            -webkit-transform-origin: 0 0;

        }

        .hex .corner-2:before {

            -webkit-transform: rotate(60deg) translate(-48px, -11px);

            bottom:0;

        }

/*=======================================================*/

        .hex.hex-1 {

            background-image:url("http://www.16sucai.com/uploadfile/show2013/0605002/images/4.jpg");

        }

        .hex.hex-2 {

            background: #f5c53c;

        }

        .hex.hex-3 {

            background: #80b971;

        }

    </style>

</head>

<body>

<div class="hex hex-1 hex-gap">

    <div class="corner-1"></div>

    <div class="corner-2"></div>

</div>

<div class="hex hex-2">

    <a href="#"></a>

    <div class="corner-1"></div>

    <div class="corner-2"></div>

</div>

<div class="hex hex-3">

    <a href="#"></a>

    <div class="corner-1"></div>

    <div class="corner-2"></div>

</div>

</div>

</body>

</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. Evolutionary Computing: 5. Evolutionary Strategies(2)

    Resource: Introduction to Evolutionary Computing, A.E.Eliben Outline recombination parent selection ...

  2. SAP 采购订单收货时报错：对于采购订单xxxx无收货可能

    因为这个问题查了挺长时间,所以写在博客里记录下. 报错详细: 每个公司的配置不同,我公司遇到的这个问题原因是这里的确认控制是从信息记录带过来的,问题解决方法是,修改下确认控制的选项: 修改确认控制的后 ...

  3. flume原理及代码实现

    转载标明出处:http://www.cnblogs.com/adealjason/p/6240122.html 最近想玩一下流计算,先看了flume的实现原理及源码 源码可以去apache 官网下载 ...

  4. HTML语言学习笔记（会更新）

    # HTML语言学习笔记(会更新) 一个html文件是由一系列的元素和标签组成的. 标签: 1.<html></html> 表示该文件为超文本标记语言(HTML)编写的.成对出 ...

  5. Asp.net有关访问页面权限的限制和错误页面配置

    一.访问页面权限的限制 一个小项目,涉及到用户登录. 在用户没登录访问内容也时,对页面做一定限制,没登录的则不能访问,直接跳转到登录界面. /// <summary> /// 对没有登录用 ...

  6. JavaWeb基础: Cookie

    Cookie相关类: javax.servlet.http.Cookie 用于创建Cookie response 里通过addCookie方法添加Cookie到响应头 request里通过getCoo ...

  7. jmeter 内存溢出解决方法

    执行“评论新鲜事”200并发就内存溢出 解决方法: [caozijuan@test09 bin]$ vi jmeter JVM_ARGS="-Xms1024m -Xmx4096m" ...

  8. 楼盘信息sq

    ID:1 楼盘名称:帝豪国际 网址:http://shangqiu.jiwu.com/loupan/239023.html 价格:2500元/平米 关注人数:497 地址:长寿大道南段 情况:在售 大 ...

  9. PHP 数据安全问题总结

    总结:关键的判断,比较尽量使用=== 类型和值都比较的恒等比较 1.if($var) $var 遵循boolean 转换. 当转换为 boolean 时,以下值被认为是 FALSE: 布尔值 FALS ...

  10. sql脚本多服务器操作

    --创建链接服务器exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','IP' exec sp_addlinkedsrvlogin 'srv_lnk','f ...