如何用CSS实现三角形从左上/右上向内旋转并添加过渡效果？

核心思路 #

要实现三角形绕指定角落向内旋转，关键是精准设置旋转中心（transform-origin）和匹配初始三角形方向的旋转角度，再通过transition添加平滑过渡。之前效果不佳大概率是因为旋转中心未与三角形的直角顶点对齐，或是旋转角度与初始三角形方向不匹配。

完整实现代码 #

HTML结构

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

CSS样式

/* 基础容器样式 */
.box {
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  margin: 30px;
  display: inline-block;
  position: relative;
}

/* 三角形基础样式 */
.triangle {
  width: 0;
  height: 0;
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡动画 */
}

/* 左上向内旋转的三角形 */
.box-left .triangle {
  top: 0;
  left: 0;
  /* 初始状态：直角在左上，斜边向外（右下方向） */
  border-top: 80px solid #4CAF50;
  border-right: 80px solid transparent;
  transform-origin: top left; /* 旋转中心设为左上角 */
}

.box-left:hover .triangle {
  transform: rotate(-90deg); /* 绕左上向内旋转90度，贴合容器左侧 */
}

/* 右上向内旋转的三角形 */
.box-right .triangle {
  top: 0;
  right: 0;
  /* 初始状态：直角在右上，斜边向外（左下方向） */
  border-top: 80px solid #2196F3;
  border-left: 80px solid transparent;
  transform-origin: top right; /* 旋转中心设为右上角 */
}

.box-right:hover .triangle {
  transform: rotate(90deg); /* 绕右上向内旋转90度，贴合容器右侧 */
}

关键细节说明 #

1. 旋转中心对齐：将transform-origin设置为top left或top right，确保旋转围绕三角形的直角顶点（即容器的角落）进行，这是实现精准向内旋转的核心。
2. 三角形方向匹配：通过调整border的边属性，让三角形初始状态的斜边向外，旋转后斜边向内贴合容器边框，符合“向内旋转”的视觉效果。
3. 过渡动画：给transform属性添加transition，指定过渡时长和缓动函数，实现平滑的旋转动画。

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