CSS实现正六边形

正六边形的特点

  从上面的图，我们很容易可以看出这个正六边形的实现方式，即一个box+2个伪元素；根据正六边形每个边的长度相等，每个角的角度为120°的原理，我们能够得出伪元素的边长等等信息。

画矩形

* {
      margin: 0;
      padding: 0;
    }
.box {
    position: relative;
    margin: 200px auto;
    height: 200px;
    /*100√3是举行的长度*/
    width: calc(200px * 1.732);
    background: lightblue;
    }

画伪元素三角形

  在画三角形之前我们需要知道三角形的画法

三角形的绘制

.box2 {
    width: 50px;
    height: 50px;
    border: 20px solid;
    border-top-color: red;
    border-bottom-color: green;
    border-right-color: yellow;
    border-left-color: blue;

}

实现的效果如下：

  当我们改变矩形的宽和高时，意味着中间空白部分会减小，当我们将宽和高变为0时，中间空白部分将消失；所以基于这一原理，得到如下效果。

  接下来我们只需要将某3条边的颜色设置为透明即可得到三角形。这里将左、右、下边的颜色设置为透明，即可得到一个方向朝下的三角形。

正六边形中三角形的实现

  基于上面的原理，我们实现正六边形中三角形时只需要改变其边长即可。

.box::before, .box::after {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
}

.box::after {
    /*通过top将三角形定位到响应的位置，after的top是2倍的边长*/
    top: 200px;
    left: 0;
    /* 根据勾股定理算出来左边和右边的边长是100√3的长度 */
    border-left: 173.2px solid transparent;
    border-right: 173.2px solid transparent;
    border-top: 100px solid lightblue;
}
.box::before {
    /*同上，只不过top是-1倍的边长*/
    top: -100px;
    left: 0;
    border-left: 173.2px solid transparent;
    border-right: 173.2px solid transparent;
    border-bottom: 100px solid lightblue;
}

  大家也可以自己去试试，根据数学公式我们可以画出很多很多的几何图形