このCSSバグのボーダーイメージを修正するにはどうすればよいですか？

Question

border-imageを追加して回転させたときに、CSSバグが発生しました。ボーダー画像を回転させた後、私は追加の線を見ることができました。どうすればそれを削除できますか？回転なしでは、すべて見栄えが良い。

height: 96px; 
width: 260px; 
vertical-align: middle; 
display: table; 
border: 26px solid transparent; 
margin: 0 auto; 
-webkit-border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch; 
border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch; 
-webkit-transition: all ease-in .3s; 
transition: all ease-in .3s; 
background-color: #cad584; 
-webkit-transform: rotate(-2deg); 
-ms-transform: rotate(-2deg); 
transform: rotate(-2deg); 
position: relative; 

コメンターが述べたようにそれは結果

Answer 1

である、あなたは、固体の背景色を持っているJPEGのエッジにアンチエイリアスを見ています。

代わりに、アンチエイリアスのエッジが見えないように、アルファ透明度を持つPNGを使用します。

境界線を介して表示される背景色を停止する方法を見つける必要があります。下の例では、境界線画像を取得する外側のdivで単純に囲みました。おそらくより洗練されたソリューションがあります！

HTML：

<div class="outer"> 
    <div class="inner">Work for Us</div> 
</div> 

CSS：ここ

border-image: url(/wp-content/uploads/2016/08/border-with-alpha.png) 48 stretch; 

JSフィドル：https://jsfiddle.net/ktxcs2c8/1/

私のひどい境界画像、および膨大なデータURLを許して！

Answer 2

は、あなたが回転する度に変化しているにもかかわらず、同じtranslateZ(1px)を残すtransform: rotate(-2deg); translateZ(1px);

を試してみてください。質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求める

transform: rotate(-10deg); translateZ(1px); 
transform: rotate(-4deg); translateZ(1px); 
transform: rotate(6deg); translateZ(1px);