css如何制作六边形
使用CSS制作六边形
在CSS中制作六边形可以通过多种方法实现，以下是几种常见的技术方案：
使用clip-path属性
clip-path属性允许裁剪元素为任意形状，包括六边形。这种方法简单且易于调整大小和颜色。
.hexagon {
width: 100px;
height: 110px;
background-color: #3498db;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}- 通过
polygon函数定义六个顶点坐标，形成六边形。 - 百分比值基于元素的宽度和高度，确保形状自适应。
使用伪元素和旋转
通过旋转两个矩形并叠加，可以模拟六边形的外观。
.hexagon {
position: relative;
width: 100px;
height: 57.74px;
background-color: #3498db;
margin: 28.87px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #3498db;
}
.hexagon:after {
top: 100%;
border-top: 28.87px solid #3498db;
}- 主元素是一个水平的矩形，宽度为
100px，高度为57.74px（六边形高度与边长的比例关系）。 - 伪元素通过边框三角形模拟六边形的上下部分。
使用SVG内联
SVG天然支持多边形绘制，可以嵌入HTML并通过CSS控制样式。
<svg width="100" height="110" viewBox="0 0 100 110">
<polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" fill="#3498db" />
</svg>points属性定义六边形的六个顶点坐标。- SVG的优势是缩放无损，适合响应式设计。
使用CSS变量实现动态调整
通过CSS变量可以灵活调整六边形的大小和颜色。
:root {
--hex-width: 100px;
--hex-color: #3498db;
}
.hexagon {
width: var(--hex-width);
height: calc(var(--hex-width) * 1.1);
background-color: var(--hex-color);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}- 变量
--hex-width控制基础尺寸，高度自动按比例计算。 - 修改变量值即可全局更新所有六边形样式。
注意事项
clip-path的兼容性较好，但在旧版本浏览器中可能需要前缀。- 伪元素方法需要精确计算尺寸，适合固定比例的六边形。
- SVG方法适合复杂交互或动画场景。
以上方法均可扩展为六边形网格或作为按钮、图标等UI元素。根据项目需求选择合适的技术方案。
