背景 - 单斜条纹

Question

我需要有CSS的背景作为附加的图像我无法使用线性渐变。

我尝试使用以下内容，但我无法创建1个白色条纹。

 div { background: #5cbcb0; background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 27%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 74.81%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 76.19%, #5cbcb0 100%); background-size: 593.97px 593.97px; } 

 <div style="height: 200px;"></div> 

Answer 1

您只需要为颜色提供正确的start和stop值。 多个白色条纹的出现是由于在73.81%之后使用的多个#fff值。

 div { background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%); /* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */ background-size: 593.97px 593.97px; background-repeat: no-repeat; /* To avoid multiple instances */ } 

 <div style="height: 200px;"></div> 

Answer 2

尝试添加no-repeat如果这有助于检查代码段。

 div { background: #5cbcb0; background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 30%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 100%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 100%, #5cbcb0 100%) no-repeat; background-size: 593.97px 593.97px; } 

 <div style="height: 800px;"></div> 

Answer 3

您可以尝试如下。 我以百分比定义了大小，因此它会响应。

 body { background: linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/30% 80% no-repeat, #5cbcb0; margin:0; height:100vh; } 

如果您想要静态版本，只需使用像素值：

 body { background: linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/200px 200px no-repeat, #5cbcb0; margin:0; height:100vh; } 

Answer 4

小心CSS！

额外的条纹说明你不仅创造了3个形状，还创造了另一种形状。 如果您只想创建3个形状，则只需要4个值而不是更多。

所以这将有效：

 div { background: #5cbcb0; background: linear-gradient(120deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%); background-size: 593.97px 593.97px; background-repeat: no-repeat; } 

 <div style="height: 200px;"></div> 

所以你只需要4个值。 是的，这是最重要的答案的重复，但这给出了实际发生的事情。 因此，为了避免多个实例，请使用no-repeat ，它会起作用，因为如果你删除它会显示多个实例，如果你尝试。 此外，您可以删除height: 200px并将其移动到div类以避免内联样式。 它也适用于135度，因此120不是“特殊”数字，在这种情况下这是有效的。 而且，你不希望它显示超过1个白色条纹，这就是为什么我提出background-repeat: no-repeat 。