本文介绍一种基于 `clip-path` 的现代 css 方案，无需 svg 或复杂伪元素，即可高效构建可响应、可交互的等边三角形网格，支持上下交替排列与悬停效果。
创建三角形网格的传统方式（如 CSS 边框技巧）往往难以对齐、响应性差，且无法实现无缝拼接。而使用 clip-path 是目前最简洁、可控性最强的纯 CSS 解决方案——它通过定义多边形顶点精准裁剪元素，天然支持等边三角形，并能通过负外边距实现紧密交错排列。
✅ 核心原理
- 向上三角形：clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
- 向下三角形：clip-path: polygon(50% 100%, 0% 0%, 100% 0%)
- 无缝拼接关键：为每个三角形设置 margin: 0 calc(-1 * var(--triangle-size) / 4)，即向左右各收缩宽度的 25%，使相邻三角形底边与顶点自然咬合。
? 完整实现代码
<div class="grid">
<div class="row">
<div>1</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>/* 网格整体布局 */
.grid {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
gap: 1.5rem;
}
.row {
display: flex;
justify-content: center;
gap: 0; /* 关键：禁用默认 gap，由 margin 控制间距 */
}
.row > * {
display: grid;
place-items: center;
width: var(--triangle-size);
height: var(--triangle-size);
margin: 0 calc(-1 * var(--triangle-size) / 4); /* 左右负边距实现交错 */
font-weight: bold;
color: #333;
transition: background-color 0.2s ease;
}
/* 响应式尺寸控制 */
.grid {
--triangle-size: calc(12.5vw + 1rem); /* 在 160px–1920px 屏幕间线性缩放 */
}
/* 三角形方向与样式 */
.row > :nth-child(odd) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: #FFF8DC; /* LemonChiffon */
}
.row > :nth-child(even) {
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
background-color: #ADD8E6; /* LightBlue */
}
/* 交互反馈 */
.row > :hover {
background-color: #ff6347; /* tomato */
transform: scale(1.05);
z-index: 1;
}⚠️ 注意事项
- 边框限制：clip-path 会裁剪掉元素的 border，如需描边效果，建议改用 SVG <polygon> 或添加 box-shadow 模拟。
- 浏览器兼容性：clip-path 在现代浏览器（Chrome 55+、Firefox 54+、Safari 15.4+）中完全支持；若需兼容旧版 Safari，可添加 -webkit-clip-path 前缀。
- 语义化建议：实际项目中，建议用 <svg> 或自定义属性（如 data-triangle="up"）增强可访问性，配合 ARIA 标签说明形状含义。
该方案结构清晰、易于扩展——只需按行增加 <div class="row"> 并在其中插入任意数量子元素，CSS 将自动按奇偶顺序分配朝向，轻松构建从蜂窝状布局到艺术化背景的三角形网格系统。
