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都可以。
还没有留言,还不快点抢沙发?