如何避免同一元素hover时clip-path与transition引发的CSS闪烁问题？

我一直在研究用CSS clip-path 属性创意美化button元素，以下是我的初始代码：

初始代码 #

HTML #

<button>Contact<br>Us</button>

CSS #

body {
  text-align: center;
  padding: 80px;
}

button {
  width: 400px;
  height: 280px;
  background-color: red;
  color: white;
  font-size: 40px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  border: 0;
  clip-path: polygon(0 0, 50% 15%, 100% 0, 100% 100%, 50% 85%, 0 100%);
  transition: 0.55s;
  padding-right: 220px;
}

button:hover {
  clip-path: polygon(0 15%, 49% 0, 49% 50%, 51% 50%, 51% 0, 100% 15%, 100% 85%, 51% 100%, 51% 50%, 49% 50%, 49% 100%, 0 85%);
  background-color: #bb0000;
  transform: rotateZ(360deg);
  padding-right: initial;
  padding-left: 220px;
}

遇到的问题：元素旋转过渡时，鼠标处于背景区域会出现闪烁，请问该如何解决？是否需要调整clip-path？

问题原因 #

闪烁的核心是：clip-path会裁剪元素的可交互区域，过渡过程中按钮的可点击范围随clip-path变化，当鼠标落在被裁剪掉的区域时，浏览器判定hover状态失效，触发状态回退，来回切换就导致了闪烁。

解决方法 #

无需调整clip-path，给按钮套一个透明父容器，将hover事件绑定在父容器上，让父容器的范围始终覆盖按钮的原始尺寸，确保过渡过程中鼠标不会脱离hover触发区域：

修改后的代码 #

HTML

<div class="button-wrapper">
  <button>Contact<br>Us</button>
</div>

CSS

body {
  text-align: center;
  padding: 80px;
}

.button-wrapper {
  display: inline-block;
  /* 保持和按钮原始尺寸一致，确保鼠标始终在可hover范围内 */
  width: 400px;
  height: 280px;
}

button {
  width: 100%;
  height: 100%;
  background-color: red;
  color: white;
  font-size: 40px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  border: 0;
  clip-path: polygon(0 0, 50% 15%, 100% 0, 100% 100%, 50% 85%, 0 100%);
  transition: 0.55s;
  padding-right: 220px;
}

.button-wrapper:hover button {
  clip-path: polygon(0 15%, 49% 0, 49% 50%, 51% 50%, 51% 0, 100% 15%, 100% 85%, 51% 100%, 51% 50%, 49% 50%, 49% 100%, 0 85%);
  background-color: #bb0000;
  transform: rotateZ(360deg);
  padding-right: initial;
  padding-left: 220px;
}

原理说明 #

• 父容器作为hover的触发区域，尺寸固定，不会随clip-path变化，只要鼠标在父容器范围内，hover状态就不会中断。
• 按钮的所有过渡效果通过父容器的hover触发，彻底避免了clip-path裁剪导致的交互区域波动问题。

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