用css画正六边形的方法

小编给大家分享一下用css画正六边形的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为南部企业提供专业的成都网站建设、做网站，南部网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）：

方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：

before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。

效果图：

注意div及伪元素的宽高需要根据上面的公式计算。

方法二：也是把正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形，如图：

效果图：

看完了这篇文章，相信你对用css画正六边形的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！