基于css实现正六边形的三种方案

方案一：通过旋转三个长方形生成正六边形

分析：

如下图所示，我们可以通过旋转三个长方形来得到一个正六边形。

疑问：

1. 长方形的宽高分别是多少？

设正六边形的边长是100，基于一些数学常识，可以得出上图得一些数据。
我们现在开始求ac的长度：由于：sin30° = 1/2，则ac/ad = 1/2。因ad=100，所以ac=50；
再根据勾股定理求cd长度：ad²-ac² = 100² - 50² = cd²。故cd约等于86.60

**所以长方形的宽是100，高则是86.6 * 2 =173.2 **

2.需要将长方形旋转多少度？

由于css的transform的rotate是以中心点进行旋转的，所以我们要求的是∠abc，就知道需要将长方形旋转多少度了
1.由于ab是垂直ad的，所以∠bad是90°。
2.由于正六边形的内角是120%，bd是平分∠adc，所以∠adb是60°。
3.由于▲abd是直角三角形，所以∠abd = 180° - ∠bad - ∠adc = 30°。
4.由于▲abd和▲bcd完全相等，所以∠abc = 2 * ∠abd = 60°。

所以我们需要将长方形旋转60°