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

Question

我在 CSS 中制作了一个 T 恤形状的多边形，除非我尝试在鼠标悬停时对其进行动画处理，否则它的显示效果与应有的完全一样。悬停后，我会在动画发生时获得与为多边形设置的背景颜色相同的右边框和底边框。动画完成后，边框再次消失。我已经尝试了从更改边框 size/color 和背景等所有内容，但没有任何改变。这就是我现在拥有的（但在 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;
 }

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

Answer 1

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

outline: 1px solid transparent;

它奏效了:)

这里是DEMO

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

Unwanted border with CSS polygon when rotating on hover

css

animation

stylus

hover