如何使用 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 前缀。
• 语义化建议：实际项目中，建议用

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