线性渐变具有不同的行为[Chrome，Edge，Firefox]与IE11

Question

我正在尝试使用CSS实现以下UI设计

Example UI

所以我现在正在做的是使用3个div，2个用于顶部和底部的三角形，1个用于中间的实际内容。

为了使三角形形状我使用线性渐变，但我面临的问题是它看起来与导航器不同。

这是我在笔http://codepen.io/archer3cl/pen/ybLPgq

上的示例

background: linear-gradient(to top right, black 49%, #FFF 51%); /*Top triangle*/
background: linear-gradient(to bottom right, black 49%, #fff 51%); /*Bottom triangle*/

在Chrome，Edge和Firefox中它看起来像设计，但在IE11看起来很分散。您可以在任一导航器中打开笔以查看差异

如何让所有导航器显示相同的样式？