CSS带线性渐变的条纹背景，条纹之间无模糊

Question

我想要这样的条纹背景：

我尝试使用线性渐变，但是在条带之间增加了一些模糊：

div {
  background-image: linear-gradient(135deg, red, white, green, white, violet)
}

<div>Foo text</div>

如何消除模糊？

Answer 1

为颜色停止添加值，并确保一种颜色的最后一个值与下一个颜色的第一个相同。

div {
  background-image: 
    linear-gradient(135deg, red 30%, white 30% 40%, green 40% 60%, white 60% 70%, violet 70%)
}

<div>Foo text</div>

这里是偏斜变换的另一种想法：

div {
   position:relative;
   overflow:hidden;
   z-index:0;
}
div:before {
  content:"";
  position:absolute;
  top:0;
  left:-20px;
  right:-20px;
  bottom:0;
  background:
   linear-gradient(red,red)       left  ,
   linear-gradient(green,green)   center,
   linear-gradient(violet,violet) right ;
  background-size:25% 100%;
  background-repeat:no-repeat;
  transform:skew(135deg);
  z-index:-1;
}

<div>Foo text</div>

Answer 2

要使用线条，应在起点和终点指定相同的颜色：

background-image: linear-gradient(to right,
   red, red 10px,
   rgba(0,0,0,0) 10px,
   rgba(0,0,0,0) 20px,
   blue 20px, blue 30px,
   rgba(0,0,0,0) 30px,
   rgba(0,0,0,0) 40px,
   green 40px, green 50px,
   rgba(0,0,0,0) 50px,
   rgba(0,0,0,0) 60px
 );
 background-size: 60px 100%;

Answer 3

div {
  background-image: repeating-linear-gradient(135deg, red, red 10px, green 10px, green 20px, violet 20px, violet 30px)
}

<div>Foo text</div>