Question

我在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;
 }

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

Answer 1

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

outline: 1px solid transparent;

它工作了:)

以下是 DEMO

在悬停时旋转时使用CSS多边形的不需要的边框

1 个答案: