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

-->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. Greenlets间如何实现互相通信？

    Greenlets互相通信之Event 1.为什么引入Event: 2.Event是什么: 3.编程实例. 为什么引入Event 1.windows中有Events,作为线程间同步的方法: 2.Gev ...

  2. Perl--学习记录（实时更新）

    标量变量(varibale)以美元符号($)开头,这个符号也成为魔符(sigil).Perl通过魔符来区分它是什么类型的变量. Perl里面大部分变量名称习惯使用全小写.而使用全大写的(比如$ARGV ...

  3. 设置git 不提交 修改权限的文件

    vim .git/config  打开文件

  4. ajax中使用post传值数组array

    如果我们在data中想放入array的参数,根据在网上搜索的结果有如下方法,但是没有一个成功的……我还是贴出来,别人成功了,也许是我哪里不对,日后也许还有机会研究..在文章的最后贴出了转化为json的 ...

  5. js 同for一样效果 (延迟)每秒循环一次 追加

    <script type="text/javascript"> var j = 1;        var timeID = null;        function ...

  6. javascript进阶系列专题：闭包(Closure)

    在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } f ...

  7. ios基础篇（二十八）—— UITableView的上拉加载

    本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...

  8. js语法重点

    1:最新的ES6规范引入了新的数据类型Map:var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael ...

  9. python 筛选股票

    x[0] = '0' or x[0]='6' or x[0]='3' len(x)=6 x.isdigit() *但是有的债券也是6位 *比如010007.IB

  10. C++ 读取txt文本内容，并将结果保存到新文本

    循序渐进学习读文件 // readFile.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include <iostream> # ...