CSS3制作六角形效果

新建一个类名.hexagon的section容器。设置它的css样式规则是：

        .hexagon{
            width: 200px;
            height: 115px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 300px rgba(255,83,77,0.5);
        }

预览

在.hexagon的section容器的前，后绘制两个和其等大小的容器，设置他们的位置，都定位在左上角。即，和当前这个.hexagon的section容器容器 叠放在一起。css样式规则设置如下所示：

        .hexagon::before,.hexagon::after{
            content:'';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            outline: 1px dashed orange;
        }

然后，接着让前面的容器旋转60度。设置样式规则如下：

        .hexagon::before{
            transform: rotate(60deg);
        }

预览：

::before这个容器，我们看起左上角（红点这里是其左上角），它的旋转 轨迹是从A点，按顺时针旋转，旋转到B这个点。曾现出的视觉效果，如下所示：

然后，接着让后面的容器旋转60度。设置样式规则如下：

        .hexagon::after{
            transform: rotate(-60deg);
        }

预览：

::after这个容器，我们看起左上角（红点这里是其左上角），它的旋转 轨迹是从A点，按逆时针旋转，旋转到B这个点。曾现出的视觉效果，如下所示：

::before和::after分别设置顺时针旋转60度和逆时针旋转60度。曾现出的效果如下所示：

接着，把三个容器的背景色，换成边框色，css样式规则调整：

        .hexagon{
            width: 200px;
            height: 115px;
            /* background-color: #fff; */
            border: 1px solid #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 300px rgba(255,83,77,0.5);
        }
        .hexagon::before,.hexagon::after{
            content:'';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /* background-color: #fff; */
            border: 1px solid #fff;
        }

预览：

接着，给三个容器设置背景色，css样式规则设置如下所示：

        .hexagon,.hexagon::before,.hexagon::after{
            background-color: rgba(175,77,255,0.5);
            border: 1px solid #fff;
            box-sizing: border-box;
        }

预览：

接着，通过6个span，绘制6个小点。分别先定位在左上角，并且他们的层级z-index要比.hexagon和::before、::after这三个容器的层级要高。css样式规则设置如下所示：

        .hexagon span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            z-index: 2;
        }

预览：

设置 4个span显示在 .hexagon 盒子的 上下 4个角点上，css样式设置如下所示：

        .hexagon span:first-child{
            left: -4px;
            top: -4px;
        }
        .hexagon span:nth-child(2){
            right: -4px;
            top: -4px;
        }
        .hexagon span:nth-child(3){
            left: -4px;
            bottom: -4px;
        }
        .hexagon span:nth-child(4){
            right: -4px;
            bottom: -4px;
        }

预览：

第5，第6个span，让其水平方向先移动到矩形的中间，然后让第5个span向下移动-62px，让第6个span向上移动-62px。css样式规则设置如下所示：

        .hexagon span:nth-child(5){
            left: calc(50% - 5px);
            bottom: -62px;
        }
        .hexagon span:nth-child(6){
            left: calc(50% - 5px);
            top: -62px;
        }

预览：

注意：这里让第5个span向下移动-62px，让第6个span向上移动-62px。 62px不是死的值。可以调整成60px或者65px都可以。