css - 如何删除两个对角相对的css不等边三角形之间的线？

Question

我用过：

http://apps.eky.hk/css-triangle-generator/

为彼此对角放置的两个不等边三角形生成 css：

左下三角形

width: 0px;
height: 0px;
border-style: solid;
border-width: 317px 0 0 512px;
border-color: transparent transparent transparent #007bff;

右上角三角形

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 317px 512px;
border-color: transparent transparent #007bff transparent;

不过，在这个测试 jsFiddle 中，两个三角形之间似乎有一条线或间隙，我无法摆脱它：

http://jsfiddle.net/rwone/MB5Lt/4/

编辑

解决方案似乎是使两个三角形的宽度都为 514px，即使容器是 512px。

Answer 1

一种解决方案是为其中一个三角形提供与边框颜色相同的背景颜色（在本例中为#007bff）。然后在Javascript函数中，在开始动画之前快速去除背景色。

更新了小提琴。