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

-->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. java父类与接口有相同的方法

    这是java多态的一个体现,如果一个类classA继承了类classB,有实现了接口interfaceA,并且接口中有方法funA(),且父类classB中也有funA(),那么对于classA来说既 ...

  2. maven-web项目中的一些小问题

    1.最新的jetty容器 org.eclipse.jetty 需要JDK1.8的支持. 2.在容器中发布WEB项目时web 中的pom.xml的依赖关系会丧失,依赖和插件需要单独完全编写(尽管IDE会 ...

  3. 数据挖掘算法（四）Apriori算法

    参考文献: 关联分析之Apriori算法

  4. js基本类型 引用类型

    参考 https://segmentfault.com/a/1190000005794070 http://blog.csdn.net/yummy_go/article/details/5050468 ...

  5. js工作中日常问题集中

    1.判断问题 如果type存在就设置type的值为type,否则设置type为0: 原始的写法,使用 if else:if(type){type = type} 使用三元操作符:type : type ...

  6. office2003安装公式编辑器mathtype5.2

    同事的一台电脑,xp系统,需要安装公式编辑器mathtype,安装完后,启动word时出现了宏的警告. 在菜单中,无论如何设置宏,都不能去除该提示框.删除了模板normal.dot,也不能解决该问题. ...

  7. 关于android的@TargetApi和@SuppressLint("NewApi")

    看别人的代码好多地方用到了@TargetApi.以前一直不知道这个是什么意思.后面偶然看了下sdk.才有所明白. 其实这个东西就是在你使用了android Lint检查工具的时候,为了防止代码出现提示 ...

  8. Flatten Binary Tree to Linked List [LeetCode]

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  9. iOS 架构模式--解密 MVC，MVP，MVVM以及VIPER架构

    本文由CocoaChina译者lynulzy(社区ID)翻译 作者:Bohdan Orlov 原文:iOS Architecture Patterns 在 iOS 中使用 MVC 架构感觉很奇怪? 迁 ...

  10. c#连接vertica数据库

    项目前期使用mysql数据库,大约每天200w数据量,十天1500w数据量之后,读取写入都会很慢,而且经常锁表,后来采用vertica数据库,下面分享vertica数据库使用方法,以及大批量数据快速写 ...