グラデーションを使用した場合の醜いエッジ

Question

2色の背景を作成してテキストコンテナの背景として使用しようとしています。 2つの異なる色を得るために私はグラデーションを使用しました。私はそれが今のように見えるようにあなたに教えてください。

よく見ると、あなたは途中でラインを見ることができる種類の、私はそれを呼び出すために何を知っていないように見え、ちょうどそれがスムーズに見えないと言うことができます。

は、ここに私のCSSです：2色の間のわずかな隙間を与える

.btn { 
    background:#8a8a8a; 
    background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%); 

    display:inline-block; 
    padding:0.75em 2.0em; 
    font-size:18px; 
    text-align:center; 
    margin:0.25em 0; 
    color:#ffffff; 
    font-weight:normal; 
    font-family:sans-serif; 
} 

Answer 1

トリックをしました（49.5パーセントと50.5パーセントのような）ポイントを停止します。

Answer 2

あなたはここにこのスタイルを試すことができます。https://jsfiddle.net/dnn02d64/4/

.btn { 
    background:#8a8a8a; 
    background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%); 

    display:inline-block; 
    padding:0.75em 2.0em; 
    font-size:18px; 
    text-align:center; 
    margin:0.25em 0; 
    color:#ffffff; 
    font-weight:normal; 
    font-family:sans-serif; 
}