如何使用CSS实现边缘完美柔化的三角形动画效果

• 原方案通过旋转带边框的div实现三角形的方式，无法灵活控制边缘的柔化曲率，最优实现思路是利用border-radius的水平/垂直双半径语法，直接构造带柔边的凸起三角形，同时搭配CSS过渡实现动画效果。
• 核心逻辑是给三角形的两侧边和顶部尖角设置统一曲率的圆角，和底部边框的圆角视觉保持一致。

<div class="tab-container">
  <div class="soft-triangle"></div>
</div>

.tab-container {
  position: relative;
  width: 120px;
  height: 60px;
  border-bottom: 1px solid #000;
}

.soft-triangle {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 70px;
  height: 32px;
  /* 双半径border-radius实现柔化边缘 */
  border-radius: 12px 12px 0 0 / 22px 22px 0 0;
  border: 1px solid #000;
  border-bottom: none;
  /* 加入弹性过渡实现平滑动画 */
  transition: all 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* 动画触发示例：hover时上移 */
.tab-container:hover .soft-triangle {
  transform: translateX(-50%) translateY(-10px);
}

• 你可以修改border-radius的数值来调整边缘柔化程度，调整宽高参数改变三角形的大小比例。
• 替换transition的缓动函数和时长，就能匹配你需要的动画节奏。

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