如何用CSS实现三角形两半反向分离的动画效果？

核心思路是用两个可独立控制的形状元素拼接成完整三角形——单个元素生成的三角形无法拆分出独立的动画部分。以下是具体实现方案：

实现步骤 #

• 用一个容器作为定位基准，内部放置两个子元素，分别模拟三角形的两个半块（比如左右两个直角三角形）
• 通过绝对定位将两个子元素拼接成完整的正三角形
• 给两个子元素分别定义@keyframes动画，控制它们向相反方向移动

完整代码示例 #

<div class="triangle-container">
  <div class="triangle-left"></div>
  <div class="triangle-right"></div>
</div>

.triangle-container {
  position: relative;
  width: 200px;
  height: 173px; /* 正三角形高度 = 边长 * √3/2，此处边长200px，高度约173px */
  margin: 50px auto;
}

/* 左侧直角三角形 */
.triangle-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 173px solid transparent;
  border-right: 100px solid #ff4444; /* 右侧边框作为三角形可视面，宽度为容器的一半 */
  border-bottom: 0 solid transparent;
  border-left: 0 solid transparent;
  animation: slideLeft 1.5s ease-out forwards;
}

/* 右侧直角三角形 */
.triangle-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 173px solid transparent;
  border-left: 100px solid #ff4444; /* 左侧边框作为三角形可视面，宽度为容器的一半 */
  border-bottom: 0 solid transparent;
  border-right: 0 solid transparent;
  animation: slideRight 1.5s ease-out forwards;
}

/* 左侧元素向左移动的动画 */
@keyframes slideLeft {
  to {
    transform: translateX(-80px);
    opacity: 0.8;
  }
}

/* 右侧元素向右移动的动画 */
@keyframes slideRight {
  to {
    transform: translateX(80px);
    opacity: 0.8;
  }
}

代码说明 #

• 容器高度根据正三角形的几何关系计算，保证两个半块能完美拼接
• 两个子元素通过border属性生成直角三角形，分别使用border-right和border-left形成三角形的可视面
• forwards关键字让动画结束后保持最终状态，不会回弹
• 可调整translateX数值、动画时长、颜色等参数适配需求

扩展方案：上下拆分三角形 #

如果需要上下拆分并向上下移动，只需调整border方向和动画的translate方向：

/* 上方三角形 */
.triangle-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 86.5px solid #22aaee; /* 高度为原三角形的一半 */
  border-left: 100px solid transparent;
  animation: slideUp 1.5s ease-out forwards;
}

/* 下方三角形 */
.triangle-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 86.5px solid #22aaee;
  border-right: 100px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 100px solid transparent;
  animation: slideDown 1.5s ease-out forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(-80px);
    opacity: 0.8;
  }
}

@keyframes slideDown {
  to {
    transform: translateY(80px);
    opacity: 0.8;
  }
}

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