css画正六边形的两种方法

前端  /  管理员 发布于 7年前   225

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

先看一下结果：

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

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

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

html代码：

<div class='div'></div>

css代码：

.div {    position: relative;    width: 50px;    height: 86.6px;    margin: 50px auto;    background-color: red;}.div: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;}.div: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;}

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

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

html代码：

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

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画正六边形的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！