奇怪的bug与css3渐变条纹

Question

我正在尝试使用纯css3创建135度经典糖果条纹。 经过一番阅读，并尝试我终于接近成功，但有一个恼人的问题，一直困扰着我。

以下是我的示例with code：和without 正如您现在可能看到的那样，在模式的左侧有一些奇怪的东西。 所以问题是 - 这是什么以及如何让它消失？ 附： chrome用户可能会发现条纹非常混乱 - 另外感谢有人能找到解决方法。

Answer 1

您可以使用一个repeating-linear-gradient执行此操作。

repeating-linear-gradient(135deg, #ff6d81, #ff6d81 8px, #fff 9px, #fff 16px, #00B2CB 17px, #00B2CB 24px, #fff 25px, #fff 32px);

Here it is in action

第一个属性是渐变的角度，然后你可以根据需要添加任意数量的渐变，通常是“开始”和“停止”点对。

更多信息here。

如果你还没有为它添加书签，MDN是一个非常好的javascript和CSS资源。