制作六边形网格
首先,创建我们的六边形。这个任务使用 clip-path 实现起来相当容易。另外推荐一个很棒的剪辑路径的在线生成器Clippy。裁剪示意图一:
<div class="main"><div class="container"><div></div><div></div><div></div><!--更多的元素. --> </div></div>
css
设置为:
.main {display: flex;--s: 100px;/* size*/--m: 4px; /* margin */}.container {font-size: 0; /* 禁用内联块元素之间的空白 */}.container div {width: var(--s);margin: var(--m);height: calc(var(--s) * 1.1547);display: inline-block;font-size: initial;clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);}
到目前为止并没有什么复杂的处理逻辑,我们设置了一个容器container
来存放inline-block
的六边形元素,另外我们需要处理因为inline-block
而导致的空白间隙问题(我们使用font-size: 0;
进行修复):
<img src=“https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab71f73de2d4087afde739f7c4de970~tplv-k3u1fbpfcp-zoom-in-crop-mark