Удалить цвет границы из линейного градиента

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

я могу увидеть тот же самый вопрос в Firefox v45.0.2 или Windows, 10. В то время как я не знаю, почему эта строка появляется, она исчезает, когда я устанавливаю точки остановки цвета, как в приведенном ниже фрагменте. Установка цветовых остановок, как в приведенном ниже фрагменте, также имеет преимущество в создании более плавных угловых градиентов.

Это хорошо работает в Firefox v45.0.2, Chrome (v51.0.2704.19 dev-m), Opera v36, IE11 и Edge.

.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>