CODEWITHSUNDEEP
cssanimationhoverstylus
Eric Sartorius
Eric Sartorius

Reputation: 25

Unwanted border with CSS polygon when rotating on hover

I made a T-shirt shaped polygon in CSS and it shows up exactly like it should unless I try to animate it on hover. Once I hover I get a right and bottom border the same color as the background set for the polygon while the animation is happening. After the animation is finished the border disappears again. I have tried everything from changing border size/color and background etc but nothing changes. This is what I have now (but in 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;
 }

Any suggestions? Here is the codepen http://codepen.io/EricSSartorius/pen/BjZyLb?editors=010

Upvotes: 2

Views: 534

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9426

To slove this, I tried

outline: 1px solid transparent;

and it worked :)

Here is the DEMO

Upvotes: 1

Related Questions