如何用css画正六边形？用css画正六边形的两种方法（代码实例）

本章给大家介绍如何用css画正六边形？用css画正六边形的两种方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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

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

效果图：

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

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

效果图：

Atas ialah kandungan terperinci 如何用css画正六边形？用css画正六边形的两种方法（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!