如何实现CSS clip-path polygon的平滑过渡效果？

问题出在两个clip-path的polygon点数不匹配：你的基础三角形是3个顶点，而切换后的形状是16个顶点，CSS无法在点数不同的路径之间计算平滑过渡动画，所以切换时会生硬跳变。

解决思路 #

让两个clip-path的polygon拥有完全相同的顶点数量和对应顺序，把顶点少的那一边用重复顶点补全，这样CSS就能正常计算每个顶点的过渡轨迹，实现平滑变形。

修改后的完整代码 #

HTML（修复了button标签未闭合的问题）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="button">
     <button>testing</button>
  </div>
  <div class="shape"></div>
</div>

CSS（统一polygon顶点数量）

.wrapper{
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.shape{
  height: 200px;
  width: 200px;
  /* 把3个顶点重复补到16个，和medium类的点数一致 */
  clip-path: polygon(
    50% 0%, 50% 0%, 50% 0%, 50% 0%,
    0% 100%, 0% 100%, 0% 100%, 0% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    50% 0%, 50% 0%, 50% 0%, 50% 0%
  );
  background: black;
  transition: clip-path 2s ease-in-out;
}

.shape.medium{
  clip-path: polygon(
    50% 1%, 63% 20%, 86% 15%, 81% 38%,
    100% 50%, 81% 63%, 86% 86%, 63% 81%,
    50% 100%, 37% 81%, 14% 86%, 19% 63%,
    0% 50%, 19% 38%, 14% 15%, 37% 20%
  );
}

JS（保持原逻辑不变）

$('button').click(function(){
  $('.shape').toggleClass('medium');
})

补充说明 #

补顶点的时候要注意顺序对应，尽量让重复的顶点对应目标形状中变化较小的位置，这样过渡动画会更自然。如果觉得补重复顶点太麻烦，也可以用path()函数定义clip-path（需要用SVG路径语法），但同样要保证两个路径的指令数量和类型对应，不过polygon补点的方法更简单直接。

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