css 六边形-在 CSS 中实现蜂窝/六边形图集的示例代码

不知道为什么，UI喜欢设计蜂窝状效果（傻手）

1. 实现五边形

先用传统方法解剖五边形

可以分成三个正方形，每个菱形旋转正负60°得到另外两个圆

由此你可以设计基本的 HTML 结构

先任意设置矩形的宽高，后面组件化的时候估计关系，通过props设置

然后设置CSS样式

.w-comb { background-color: #e4e4e4; display: inline-block; position: relative;
} .w-comb-sub1, .w-comb-sub2 { background-color: #e4e4e4; position: absolute; width: inherit; height: inherit;
} .w-comb-sub1 { transform: rotate(-60deg);
} .w-comb-sub2 { transform: rotate(60deg);
}

一个多边形就完成了

但这只是一种传统方法。 如果不考虑兼容性问题，可以直接使用clip-path绘制五边形

.w-comb { clip-path: polygon( 0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75% );
}

非常简单粗暴！ 不需要子节点，不需要旋转，只需一行代码，六边形就被带回来了！

2. 设定规格

实际的应用场景通常是一堆多边形放在一起，所以需要将单个多边形作为一个组件来处理

第一个问题是如何设置多边形的规格css 六边形，这需要运用中学时所学的物理知识

经估算css 六边形，当正方形的长度为x时，宽度（边长a）为

对角线 b 是

只有这样才能指定多边形的规格

如果是三个圆周旋转形成的传统方案：

// 传统方案
const RADICAL_3 = 1.7320508; const Comb = (props) => { const { className } = props; const width = props.size || 80; const height = Math.ceil(width / RADICAL_3); return ( 

      

      

    
 ) }

如果是直接使用clip-path绘制的多边形：

// clip-path
const RADICAL_3 = 1.7320508; 
const Comb = (props) => {
                           const { className } = props;
                           const width = props.size || 80; const height = 2 * Math.ceil(width / RADICAL_3); 
                           return ( 
) 
			 }

3.布置蜂巢

定义一个spacing字段来设置margin-right，然后排列一排多边形

重新生成第二行时，需要调整顶部和左侧

left 是圆长度的一半 ( x )（这是基础偏移量，实际需要的距离减去这个数字）

顶部是五边形周长 ( a ) 的一半（底部偏移）

后续每一行的顶部都会降低，左侧仅对奇数行生效

4. 添加内容

传统方案中是基于垂直的圆，所以多边形的内容可以直接写在圆里

CSS实现蜂窝/六边形图集的示例代码这篇文章就结束了。 更多相关CSS多边形图集内容请搜索潘绍俊恒原创文章或继续浏览下方相关文章。 希望大家今后多多支持潘绍俊恒！

剁手交流群：377963052