如何使用 HTML 和 CSS 创建三角形网格

本文介绍一种基于 `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%，使相邻三角形底边与顶点自然咬合。

? 完整实现代码

  
    1
  
  
    1
    2
    3
  
  
    1
    2
    3
    4
    5
  
  
    1
    2
    3
    4
    5
    6
    7
  

/* 网格整体布局 */
.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 或添加 box-shadow 模拟。
• 浏览器兼容性：clip-path 在现代浏览器（Chrome 55+、Firefox 54+、Safari 15.4+）中完全支持；若需兼容旧版 Safari，可添加 -webkit-clip-path 前缀。
• 语义化建议：实际项目中，建议用

该方案结构清晰、易于扩展——只需按行增加