html创建六边形区域

之前看到个由六边形组成的页面，所以自己也考虑实现一下

我已经把代码放到了github上 所以这里只将思路 不聊细节

1 利用border

将border 放粗，然后将width 和height设为0，将任意三个方向的border 隐藏掉，这样你会得到一个三角形，然后将两个三角形贴合在一个div上 调整纯色背景

2 利用overflow：hidden

在一个div中嵌套多层div，每一层的div进行一定的旋转，最后形成一个六边形的可视区域

3 利用transform

利用transform 将div编程菱形，然后将内部的content div也略微调整一下，最后形成一个六边形的可视化区域，该方法比上个方法简单不少

3利用overflow的子div部分来实现占据六边形空间

对所有子图层使用 background：inherited 来实现背景图片一层，经过旋转的图层要使用:before伪类来遮盖住自身同时隐藏旋转细节

代码地址https://github.com/yueguangxuanyuan/CSSHexagon