嘿，我刚好之前折腾过类似的三角形拼菱形效果，给你几个实用的实现方案，应该能帮你解决问题！

方案1：两个三角形拼接成单个菱形 #

如果你的需求是用两个三角形拼成一个菱形，用CSS border属性就能轻松实现——原理是利用透明border构建三角形，再把正、倒两个三角形上下拼接：

CSS 代码 #

/* 定义正三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 87px solid #42b983; /* 等边三角形高度=边长×√3/2，这里边长100px，高度≈87px */
}

/* 定义倒三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 87px solid #42b983;
}

/* 组合成菱形的容器 */
.diamond-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 可选：添加hover效果 */
  cursor: pointer;
}

.diamond-single:hover .triangle-up,
.diamond-single:hover .triangle-down {
  border-bottom-color: #2c8a5f;
  border-top-color: #2c8a5f;
}

HTML 结构 #

<div class="diamond-single">
  <div class="triangle-up"></div>
  <div class="triangle-down"></div>
</div>

方案2：多个小三角形排列成大菱形网格 #

如果是要让一堆小三角形排列成大的菱形形状，用Flex布局就能实现对称排列，下面是一个3层对称菱形的示例：

CSS 代码 #

/* 定义基础三角形尺寸，用CSS变量方便统一调整 */
:root {
  --tri-size: 30px;
  --tri-height: calc(var(--tri-size) * 1.732); /* √3≈1.732，保证是等边三角形 */
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: var(--tri-size) solid transparent;
  border-right: var(--tri-size) solid transparent;
  border-bottom: var(--tri-height) solid #42b983;
  margin: 0 4px;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: var(--tri-size) solid transparent;
  border-right: var(--tri-size) solid transparent;
  border-top: var(--tri-height) solid #66ccff;
  margin: 0 4px;
}

/* 菱形网格容器 */
.diamond-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 每行的排列样式 */
.row {
  display: flex;
  margin: -1px 0; /* 消除三角形之间的细微缝隙 */
}

/* 调整不同行的位置，让整体更贴合菱形轮廓 */
.row-1 { margin: 0 calc(var(--tri-size) * -1); }
.row-2 { margin: 0 calc(var(--tri-size) * -0.5); }

HTML 结构 #

<div class="diamond-grid">
  <!-- 最上层：1个正三角形 -->
  <div class="row row-1">
    <div class="triangle-up"></div>
  </div>
  <!-- 第二层：2个倒三角形 -->
  <div class="row row-2">
    <div class="triangle-down"></div>
    <div class="triangle-down"></div>
  </div>
  <!-- 中间层：3个正三角形 -->
  <div class="row row-3">
    <div class="triangle-up"></div>
    <div class="triangle-up"></div>
    <div class="triangle-up"></div>
  </div>
  <!-- 对称的第二层 -->
  <div class="row row-2">
    <div class="triangle-down"></div>
    <div class="triangle-down"></div>
  </div>
  <!-- 对称的最上层 -->
  <div class="row row-1">
    <div class="triangle-up"></div>
  </div>
</div>

方案3：用SVG实现精准排列 #

如果需要更精准的形状控制（比如适配复杂的响应式场景），SVG是更好的选择，它能直接绘制三角形并精准定位：

SVG 代码 #

<svg width="300" height="350" viewBox="0 0 300 350">
  <!-- 最上层正三角形 -->
  <polygon points="150,30 100,117 200,117" fill="#42b983"/>
  <!-- 第二层两个倒三角形 -->
  <polygon points="100,117 50,204 150,204" fill="#66ccff"/>
  <polygon points="200,117 150,204 250,204" fill="#66ccff"/>
  <!-- 中间层三个正三角形 -->
  <polygon points="50,204 0,291 100,291" fill="#42b983"/>
  <polygon points="150,204 100,291 200,291" fill="#42b983"/>
  <polygon points="250,204 200,291 300,291" fill="#42b983"/>
</svg>

小提示 #

• 用CSS变量可以快速统一调整所有三角形的大小，不用逐个修改数值；
• 负margin是消除三角形缝隙的小技巧，如果你用的是纯色背景，也可以把三角形的相邻边设置成背景色来隐藏缝隙；
• 如果需要给单个三角形加交互效果，直接给对应的元素加:hover或者JavaScript事件即可。

内容的提问来源于stack exchange，提问作者Ahkil Jackson