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

我想要创建如图所示的三角形网格用于项目开发，但不确定具体实现方案，请求技术协助。
注：目标布局为正立与倒立三角形交错排列的网格结构

现有代码 #

HTML 代码 #

<div class="grid">
  <div class="triangle"></div>
  
  <div class="row2">
     <div class="triangle2"></div>
    <div class="triangle3"></div>
    <div class="triangle2"></div>
  </div>
  <!-- Add more triangles as needed -->
</div>

CSS 代码 #

.grid {
  display: flex;
  flex-wrap: wrap;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin: 10px;
}

.triangle2 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin: 10px;
}

改进实现方案 #

你的现有代码未实现交错的倒立三角形，也未做好网格对齐，以下是优化后的完整方案：

核心思路 #

• 用flex布局实现每行三角形的横向排列
• 区分正立（triangle-up）和倒立（triangle-down）三角形，倒立三角形通过border-top属性实现
• 利用负margin和偏移对齐，让三角形紧密贴合形成网格

完整代码 #

HTML

<div class="triangle-grid">
  <!-- 第一行：正立三角形 -->
  <div class="row">
    <div class="triangle triangle-up"></div>
    <div class="triangle triangle-up"></div>
    <div class="triangle triangle-up"></div>
  </div>
  <!-- 第二行：倒立三角形（偏移对齐） -->
  <div class="row offset">
    <div class="triangle triangle-down"></div>
    <div class="triangle triangle-down"></div>
  </div>
  <!-- 第三行：正立三角形 -->
  <div class="row">
    <div class="triangle triangle-up"></div>
    <div class="triangle triangle-up"></div>
    <div class="triangle triangle-up"></div>
  </div>
</div>

CSS

.triangle-grid {
  width: fit-content;
  margin: 20px;
}

.row {
  display: flex;
  justify-content: center;
  margin: -25px 0; /* 负margin让上下行三角形顶点/底边贴合 */
}

.row.offset {
  margin-left: 50px; /* 偏移半宽，实现交错排列 */
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin: 0 10px; /* 水平方向间距 */
}

.triangle-up {
  border-bottom: 100px solid red;
}

.triangle-down {
  border-top: 100px solid blue;
}

关键说明 #

• row.offset的margin-left值等于三角形的半宽（50px），确保上下行三角形交错对齐
• 负margin（-25px）为三角形高度的1/4，让正立三角形的底边与倒立三角形的顶点紧密贴合
• 可根据需求调整三角形尺寸（border宽度）、颜色和间距
• 如需扩展更多行，重复row和row.offset的结构即可

内容的提问来源于stack exchange，提问作者rl fefefelsgha