css - 具有线性渐变的 CSS 条纹背景，条带之间没有模糊

Question

我想要这样的条纹背景：

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

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

<div>Foo text</div>

如何去除模糊？

标签： css

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>