css画正六边形的两种方法

说下两种css 制作正六边形的方法。

先看一下结果：

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

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

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

html代码：

<p class='p'></p>

css代码：

.p {  position: relative;  width: 50px;  height: 86.6px;  margin: 50px auto;  background-color: red;}.p:before {  content: '';  display: block;  position: absolute;  width: 0;  height: 0;  right:50px;  border-width: 43.3px 25px;  border-style: solid;  border-color: transparent red transparent transparent;}.p:after {  content: '';  display: block;  position: absolute;  width: 0;  height: 0;  left:50px;  border-width: 43.3px 25px;  border-style: solid;  border-color: transparent transparent transparent red;  top:0;}

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

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

html代码：

<p class='p-2'> <p class='one'></p> <p class='two'></p> <p class='three'></p></p>

css代码:

.one {  width: 50px;  height: 86.6px;  margin: 0 auto;  border-top: 1px solid red;  border-bottom: 1px solid red;}.two {  position: absolute;  width: 50px;  height: 86.6px;  left: 25px;  top: 0;  transform: translate(-50%,-50%);  transform: rotate(60deg);  border-top: 1px solid red;  border-bottom: 1px solid red;}.three {  position: absolute;  width: 50px;  height: 86.6px;  left: 25px;  top: 0;  transform: translate(-50%,-50%);  transform: rotate(300deg);  border-top: 1px solid red;  border-bottom: 1px solid red;}

以上两种方法，元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写。

总结

以上所述是小编给大家介绍的css画正六边形的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！