ホバーでスケーリングされたときに小さな行が表示される

Question

:before要素（左向きの三角形）に問題があります。transform: scaleの:hoverに何かがありますか分かりませんこれを引き起こしています。他のウェブサイトでも同じ効果が見られましたが、それは起こりません。

すべてのヘルプは

.container{ 
 
    display: flex; 
 
    height: 45vw; 
 
    width: 100%; 
 
    background: black; 
 
} 
 

 
.image{ 
 
    background: blue; 
 
    width: 50%; 
 
    height: 100% 
 
} 
 

 
.text{ 
 
    background: yellow; 
 
    width: 50%; 
 
    height: 100% 
 
} 
 

 
.text:before{ 
 
    content: ''; 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    top: 50%; 
 
    left: -17px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-right: 20px solid yellow; 
 
} 
 

 
.text:hover{ 
 
    transform: scale(1.1); 
 
    transition: 0.4s; 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    
 
    </div> 
 
    <div class="text"> 
 
    
 
    </div> 
 
</div>

をいただければ幸いですjsFiddle上のビュー：https://jsfiddle.net/wap184pe/1/

Answer 1

この回避策は、本質的にあなたが持っている三角形三角形の2倍のサイズになりますそれの半分を隠すので、細いボーダーはviではありませんシブルFirefoxで枠線として三角形を描画して、this related issueをチェックしてください。

.container{ 
 
    display: flex; 
 
    height: 45vw; 
 
    width: 100%; 
 
    background: black; 
 
} 
 

 
.image{ 
 
    background: blue; 
 
    width: 50%; 
 
    height: 100% 
 
} 
 

 
.text{ 
 
    background: yellow; 
 
    width: 50%; 
 
    height: 100% 
 
} 
 

 
.text:before{ 
 
    content: ''; 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    top: 35%; 
 
    height: 0; 
 
    width: 0; 
 
    border: 36px solid transparent; 
 
    border-right: 0; 
 
    border-top-color: yellow; 
 
    transform: rotate(225deg); 
 
} 
 

 
.text:hover{ 
 
    transform: scale(1.1); 
 
    transition: 0.4s; 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    
 
    </div> 
 
    <div class="text"> 
 
    
 
    </div> 
 
</div>

Answer 2

あなたはhttp://www.cssarrowplease.comで発電機にある矢印を使用している場合は、自分でトラブル