直線勾配から境界線の色を削除する

Question

重なり合った線形勾配から（境界線）色を削除する際に問題がありました。 IE 11では期待通りに動作します。 Firefoxではグラデーションの間に小さな目に見える灰色の線があります。これをどうやって削除できますか？

私はそれをこの方法を試してみました：ここ

.box2 { 
    background-image: -webkit-linear-gradient(154deg, red 67%, transparent 33%), -webkit-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -moz-linear-gradient(154deg, red 67%, transparent 33%), -moz-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -ms-linear-gradient(154deg, red 67%, transparent 33%), -ms-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -o-linear-gradient(154deg, red 67%, transparent 33%), -o-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: linear-gradient(154deg, red 67%, transparent 33%), linear-gradient(26deg, transparent 67%, red 33%); 
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat; 
    background-size: 80% 100%; 
    height: 100px; 
    width: 100%; 
    border: 0; 
} 

はフィドルです： https://jsfiddle.net/aam6roaf/

Answer 1

Iながら私は、Firefox v45.0.2またはWindows 10で非常に同じ問題を見ることができますなぜそのラインが現れているのか分かりません。下のスニペットのようにカラーストップポイントを設定すると消えてしまいます。下のスニペットのようにカラーストップを設定すると、より滑らかな角度のグラデーションが得られるという利点もあります。

これは、Firefox v45.0.2、Chrome（v51.0.2704.19 dev-m）、Opera v36、IE11、およびEdgeでうまくいきます。私はそれを見ることはできません

私のFFで

.box2 { 
 
    background-image: linear-gradient(154deg, red 67%, transparent 67.25%), linear-gradient(26deg, transparent 67%, red 67.25%); 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    background-size: 80% 100%; 
 
    height: 100px; 
 
    width: 100%; 
 
    border: 0; 
 
}

<div class="box2"></div>