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

-->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. shell获得python的print的值

    #!/usr/bin/env python print('aaa') #!/bin/bash var=`python testpython.py` (注意这个引号,是反引号,Tab上面的那个...) ...

  2. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  3. js操作新添加的DOM的问题

    $(function(){ $("body").on("click", '.abc', function(){ alert('ok'); }); $('.b') ...

  4. unity-点乘和叉乘的应用

    http://blog.csdn.net/oskytonight/article/details/38900087 点乘:两个向量点乘得到一个标量 ,数值等于两个向量长度相乘后再乘以二者夹角的余弦值 ...

  5. 转:Linux内部的时钟处理机制全面剖析

    Linux内部的时钟处理机制全面剖析 在 Linux 操作系统中,很多活动都和时间有关,例如:进程调度和网络处理等等.所以说,了解 Linux 操作系统中的时钟处理机制有助于更好地了解 Linux 操 ...

  6. vue切换按钮（关闭消失型）

    弹窗: <div class="pop" v-show="isShow"> <i class="iconfont icon-icon ...

  7. 如何实现自定义的android WebView错误页

    一般来说,可能第一时间想到的是自定义一个html来替代webview内置的异常页面.  但是实际操作时,这种方法比较困难. 这里介绍一个简单的替代方案,希望能有所帮助. 可以采用嵌套layout的方式 ...

  8. NGUI制作属于自己Button

    1.收集一些PNG或PSD格式的button按钮图片(放在img文件夹下,全选) 2.选择需要制作button的图片,NGUI--Atlas Maker--Create,会出现三个命名一样的东西,1个 ...

  9. 2013年度最强AngularJS资源合集

    原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...

  10. css3中webkit-box的用法

    转自:http://www.frontopen.com/288.html 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局 ...