css - 背景 - 单斜条纹

我需要有一个带有 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>

最佳答案

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

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>

关于css - 背景 - 单斜条纹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57522446/