纯HTML+CSS实现正六边形效果（非SVG或Canvas）

效果

我们要实现的效果如下图所示，JSRUN

图1 正六边形效果

实现

下面我们来实现一个对边之间宽度为200px的一个正六边形，JSRUN

HTML

CSS

        .hexagon {
            display: inline-block;
        }

        .hexagon .bar-rotate-left {
            width: 200px;
            height: 231px;
            overflow: hidden;
            transform: rotate(60deg);
            display: inline-block;
        }

        .hexagon .bar-rotate-right {
            width: 200px;
            height: 231px;
            overflow: hidden;
            transform: rotate(60deg);
            display: inline-block;
        }

        .hexagon .bar-horizontal {
            width: 200px;
            height: 232px;
            background: #FFFFFF;
            transform: rotate(-120deg);
            display: inline-block;
        }

        .hexagon .bar-horizontal:hover {
            background: #F0F0F0;
        }

原理

通过上面的代码我们看到，我们将三个嵌套的行内块级div分别旋转了一定的角度，并设置一二级div overflow: hidden; 以及第三级div的 background ，实现了一个正六边形。那么原理是什么呢？请看下图：

图2 原理

粉红色矩形就是class为.bar-rotate-left的div，也就是第一级div；
蓝色矩形就是class为.bar-rotate-right的div，也就是第二级div；
绿色矩形就是class为.bar-horizontal的div，也就是第三级div。
我们发现，三个矩形的重叠区域就是一个正六边形，那么如何只显示中间的重叠区域呢？关键就在这里：

        .hexagon .bar-rotate-left {
            overflow: hidden;
        }

        .hexagon .bar-rotate-right {
            overflow: hidden;
        }

        .hexagon .bar-horizontal:hover {
            background: #F0F0F0;
        }

我们设置了第一二级div的css属性overflow: hidden;，这样，溢出父元素的地方就被隐藏了，见下图：

图3 阴影区域为被overflow:hidden隐藏的区域，红色区域为可见区域（阴影和红色重叠区域为最内层元素被隐藏的区域，但对应的第一层元素这部分区域是可见的

上图中阴影区域即因溢出被隐藏的区域。大家可能会发现，其实有一部分区域是没有被隐藏掉的，即第一层以及第二层的部分区域是无法被隐藏的。我们可以将第一二层的背景设置为透明，让这部分看起来“被隐藏”掉了。最后给最内层设置一个背景色，这样就只有内层是“可见”的，见下图：

图4 阴影区域为被overflow:hidden隐藏的区域，白色区域为背景透明区域（阴影和绿色重叠区域为最内层元素被隐藏的区域，但对应的第一层元素这部分区域是可见的）

这些长度值，角度值是如何计算的

如图：

图5 角度以及长度计算

上图已经很明显了，这里不多做解释。但在这里需要注意一点：使用transform: rotate();旋转一个元素，它的子元素也会随着旋转。