linear-gradient (arrow/triangle) works only in google chrome - html

Question

This is what I have tried:
http://codepen.io/helloworld/pen/DkgbF
PLEASE use google chrome to watch the pen because in chrome v28 the linear-gradient (white triangle/arrow) works but it works NOT in IE10 or FF22 or Safari 5.1.7 on windows.
This way it looks in google chrome:
Why does it work only in google chrome?
<ul class="_7/5Z" style="display: table; height: 100%; float: left; font-size: 7px;background:green;">
<li style="list-style: none;background:blue; display: table-row;">
<div style="height: 99%;padding-left:1%;padding-top:1%;">
<div style="background: red; width: 50%; height: 100%; float: left;">
<div style="height: 100%;" class="segmentTriangle"></div>
</div>
<div class="fontsize vertical-center" style="font-size:20px;height: 100%; background: yellow; width: 50%; float: left;">33333
</div>
</div>
</li>
</ul>
body, html {
width: 100%;
height: 100%;
font-family: arial;
/*overflow: hidden;*/
}
* { /* Every element which has a border or padding value puts this value inside the div */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
._7\/5Z {
width: 17.50%;
}
.horizontal-right {
text-align: right;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}
.segmentTriangle {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom, white 50%, transparent 50%);
background: -o-linear-gradient(to right bottom, white 50%, transparent 50%);
background: -moz-linear-gradient(to right bottom, white 50%, transparent 50%);
background: -webkit-linear-gradient(to right bottom, white 50%, transparent 50%);
background: -ms-linear-gradient(to right bottom, white 50%, transparent 50%);
}
UPDATE
More information:
I am using knockoutjs for data-binding data to html. Now imagine my ul-tag has a foreach-binding and everything inside the ul that means every li-tag and its content is repeated 7 times because thats my requirement. I have updated my init question with a code sample that you understand better. Just use my code and make 7 copies of the li-tag and its content and paste all this inside the ul-tag to imitate a foreach loop then you will see that your latest display:table-cell workaround breaks everything. Hope that helps. :)
See this sample: http://codepen.io/helloworld/pen/gfeqK