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

-->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. (转)javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  2. Android之拨号界面图片风格，无信息默认显示界面修改

    Android之拨号界面图片风格,无信息默认显示界面修改 点开Dialer app,出现拨号,联系人,收藏三个选项卡,也就是三个Fragment,在三个界面都没有信息的时候会显示一个时钟,联系人,收藏 ...

  3. javaWeb中 servlet 、request 、response

    1.Servlet (1)Servlet是JavaEE的一个动态web资源开发技 术,就是在服务器上运行的小程序,这个小程序是由服务器调用的,服务器为了能调用这个小程序,就要求这样的程序必须实现一个S ...

  4. memcached 的简介、安装、命令

    一.memcached 概述 Memcache(内存,缓存) : 是一个高性能的分布式的内存对象缓存系统.通过在内存里维护一个巨大的hash表.(key=value) Hash表 key(键) val ...

  5. ASP.NET MVC异步上传文件

    自己做的一个小dome.贴出来分享一下: 前端: <form id="formfile" method="post" enctype="mult ...

  6. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

  7. javascript中对象在OOP方面的一些知识（主要是prototype和__proto__相关）

    在ES6的Class到来之前,先总结下个人对js中prototype属性的理解. 1.构造函数(大写函数名  this 无return)   2.原型对象(函数.prototype)  3.实例对象( ...

  8. [整]磁盘 I/O 性能监控指标和调优方法

    在介绍磁盘 I/O 监控命令前,我们需要了解磁盘 I/O 性能监控的指标,以及每个指标的所揭示的磁盘某方面的性能. 磁盘 I/O 性能监控的指标主要包括: 指标 1:每秒 I/O 数(IOPS 或 t ...

  9. android xfermode绘图

    1.fermode:是来自 transfer-modes,在画笔中设置xfermode后,画笔在使用的时候就会应用设置的像素转换模式.就类似于ps中的选取功能,留下的选取是从原选区中去除还是合并,取交 ...

  10. 利用jQueryRotate旋转插件开发大转盘抽奖

    前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...