如何修改clip-path过渡动画的闭合方向？

完全可以实现，只需要调整clip-path的顶点坐标，改变过渡时的形状变化轨迹，就能让底部缺角的盒子在hover时从上到下完成闭合。

修改后的代码示例 #

HTML

<div class="shape"></div>

CSS

.shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

/* 初始状态：底部右侧保留缺角 */
.shape,
.shape:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

/* hover状态：补全底部缺角，形成完整正方形 */
.shape:hover,
.shape:hover:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

关键调整说明 #

• 初始状态的clip-path在底部右侧增加了顶点80% 80%，让缺角的上边界处于盒子80%高度位置。
• hover时将右侧顶点100% 80%改为100% 100%，过渡过程中该顶点会向下移动，从上到下填充底部缺角区域，实现从上到下闭合的视觉效果，替代了原来的向外展开逻辑。

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