css - 背景 - 单斜条纹

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颜色的值。多条白条的出现是由于多条#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>