css 六边形计算 |css3 多个float的高度

六边形的高度(H) = 六边形的宽度(W) * tan(30度)
其中，tan(30度) ≈ 0.577
六边形的周长(C) = 6 * 六边形的宽度(W)
六边形的面积(A) = (3 * sqrt(3) * W^2) / 2

根据上面的公式，大家就可以来创建CSS六边形。下面是一段CSS代码示例：

.hexagon {
width: 120px;
height: 69px; /* 六边形的高度 = 120 * 0.577 = 69.24 */
background-color: #9cf;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 34.5px solid #9cf; /* 六边形的高度 / 2 */
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 34.5px solid #9cf; /* 六边形的高度 / 2 */
}

这段代码使用了:before和:after伪元素来创建六边形的上方和下方两个三角形部分。其中，border的样式和算法结果配合来达到六边形的形状。同时，大家可以修改CSS的width和height属性，来改变六边形元素的宽高比例。

通过CSS计算六边形的公式和代码示例，相信读者们可以轻松地创建出自己心目中的六边形元素了。