一个简单的效果其实就是用了clip-path这个属性,可以在这个网站快捷的使用clip-path定义自己的效果剪切路径
上代码
css蜂窝效果.f { width: 100%; height: 100%; display: flex; } .item { width: calc(100vw / 10); height: calc(100vw / 10); background-color: #ccc; outline: 1px solid #fff; -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }