悬停时旋转时带有 CSS 多边形的不需要的边框

Posted 2023-03-06

【中文标题】悬停时旋转时带有 CSS 多边形的不需要的边框

【英文标题】：Unwanted border with CSS polygon when rotating on hover

【发布时间】：2016-04-15 07:18:06

【问题描述】：

我在 CSS 中制作了一个 T 恤形状的多边形，除非我尝试在悬停时对其进行动画处理，否则它的显示效果与应有的完全一样。一旦我悬停，我会得到一个右边框和下边框，其颜色与动画发生时为多边形设置的背景颜色相同。动画完成后，边框再次消失。我已经尝试了一切，从改变边框大小/颜色和背景等，但没有任何改变。这就是我现在拥有的（但在 Stylus 中）......

 .shirt 
      background: darken(#1e90ff, 40%);
      width: 100px;
      height: 100px;
      margin:  20px auto;
      -webkit-clip-path: polygon(68% 5%, 32% 5%, 0 24%, 9% 44%, 25% 36%, 25% 90%, 75% 90%, 75% 36%, 91% 44%, 100% 24%);
      clip-path: polygon(68% 5%, 32% 5%, 0 24%, 9% 44%, 25% 36%, 25% 90%, 75% 90%, 75% 36%, 91% 44%, 100% 24%);
 

 .shirt:hover 
   transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -webkit-transition: -webkit-transform 3s ease;
 

有什么建议吗？这是代码笔http://codepen.io/EricSSartorius/pen/BjZyLb?editors=010

【参考方案1】：

为了解决这个问题，我试过了

outline: 1px solid transparent;

它成功了:)

这里是DEMO

【讨论】：

啊，没想到要用大纲。非常感谢！

@EpicSatorius 我尝试使用背面可见性和类似的东西。没用。尝试了大纲作为最后的手段，它就像一个魅力:)