是否可以在CSS中制作这样的对角细条纹？

Question

是否可以仅使用CSS（和无图像）背景，如下图中的蓝色背景？如果是这样，怎么样？

小提琴：https://jsfiddle.net/hd74keqq/

.striped-blue { background: #3777BB; padding: 20px;}
  .striped-blue p { color: #FFF; }

Answer 1

也许它会帮助你:)。

<强> CSS：

div {
  width: 100%;
  height:900px;
  background: repeating-linear-gradient(
  -55deg,
  #3777BB,
  #3777BB 1px,
  #3072B8 1px,
  #3072B8 6px
);
}

部分相似。

Demo

您可以使用这些属性来满足您的需求。

div {
  width: 100%;
  height:900px;
  background: repeating-linear-gradient(
  -40deg,
  #3777BB,
  #3777BB 1px,
  #3072B8 1px,
  #3072B8 4.9px
);
}

Demo

修改：您可以在此处获得有关重复线性渐变的更多信息

正式语法：

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

More info