Remove border color from linear gradient - html

Question

I've a problem removing a (border) color from a overlapping linear gradient. In IE 11 it workes as expected. In Firefox there is a small visible grey line between the gradients. How can I remove this?
I tried it this way:
.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;
}
Here's a fiddle:
https://jsfiddle.net/aam6roaf/

Answer 1

I can see the very same issue in Firefox v45.0.2 or Windows 10. While I have no idea why that line is appearing, it goes away when I set the color-stop points like in the below snippet. Setting color stops like in the below snippet also has the advantage of producing smoother angled gradients.
This works well in Firefox v45.0.2, Chrome(v51.0.2704.19 dev-m), Opera v36, IE11 and 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>