是否可以在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
);
}

它部分相​​似.

演示

您可以使用酒店来满足您的需求.

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

演示

编辑:这里有更多关于重复线性渐变的信息

形式语法:

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

更多信息