本文介绍一种基于 `clip-path` 的现代 css 方案，无需 svg 或复杂伪元素，即可高效构建可响应、可交互的等边三角形网格，支持上下交替排列与悬停效果。

创建三角形网格的传统方式（如 CSS 边框技巧）往往难以对齐、响应性差，且无法实现无缝拼接。而使用 clip-path 是目前最简洁、可控性最强的纯 CSS 解决方案——它通过定义多边形顶点精准裁剪元素，天然支持等边三角形，并能通过负外边距实现紧密交错排列。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

✅ 核心原理

• 向上三角形：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 将自动按奇偶顺序分配朝向，轻松构建从蜂窝状布局到艺术化背景的三角形网格系统。