css - css3渐变条纹的奇怪错误

Question

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

这是我的代码示例：并且没有 您现在可能会看到，模式左侧有一些奇怪的东西。所以问题是 - 这是什么，我怎样才能让它消失？PS 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);

这是在行动。

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

更多信息在这里。

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