Zig Zag Stripes with 3 or 4 colors - CSS3

Question

Hello,

I’m trying to make a zig-zag Stripe in css3 with 4 colors, would be gray, white, pink and white again. However I’m only able to do it with two colors.

.zig {
  background:
    linear-gradient(135deg,
      pink 25%,
      rgba(0,0,0,0) 25.1%),
    linear-gradient(225deg,
      pink 25%,
      rgba(0,0,0,0) 25.1%),
    linear-gradient(315deg,
      pink 25%,
      rgba(0,0,0,0) 25.1%),
    linear-gradient(45deg,
      pink 25%,
      rgba(0,0,0,0) 25.1%),
    #ffffff;
  background-size: 40px 40px;
  background-position: -20px 0, -20px 0, 0 0, 0 0;
  width: 240px;
	height: 240px;
  margin: 20px;
}

<div class="zig"></div>

Answer 1

Look I made this model, it is simpler to understand than the other, but it uses more gradients to do... The idea is that you have only two angles, 45deg and -45deg, and that way you will "grow" the gradients behind each other.

See this image to better understand why so many gradients, and how they position themselves. I made the image kind of rough, but it’s just to pass the idea.

With this ideie I arrived in this "minor pattern", which is the fraction of repetition we will use.

Follow the code by applying the pattern zigzag gradient. To decrease the thickness of the lines in a practical way use the background-size.

.zig {
	background:
		linear-gradient(45deg,	#ddd 15%,rgba(0, 0, 0, 0) 15.1%),
		linear-gradient(-45deg,	#ddd 15%,rgba(0, 0, 0, 0) 15.1%),
		linear-gradient(-45deg,	#fff 30%,rgba(0, 0, 0, 0) 30.1%),
		linear-gradient(45deg,	#fff 30%,rgba(0, 0, 0, 0) 30.1%),
		linear-gradient(-45deg,	pink 45%,rgba(0, 0, 0, 0) 45.1%),
		linear-gradient(45deg,	pink 45%,rgba(0, 0, 0, 0) 45.1%),
		linear-gradient(-45deg,	#fff 60%,rgba(0, 0, 0, 0) 60.1%),
		linear-gradient(45deg,	#fff 60%,rgba(0, 0, 0, 0) 60.1%),
		linear-gradient(-45deg,	#ddd 75%,rgba(0, 0, 0, 0) 75.1%),
		linear-gradient(45deg,	#ddd 75%,rgba(0, 0, 0, 0) 75.1%),
		linear-gradient(-45deg,	#fff 100%,rgba(0, 0, 0, 0) 100.1%),
		linear-gradient(45deg,	#fff 100%,rgba(0, 0, 0, 0) 100.1%);
	background-size: 54px 80px;
	width: 380px;
	height: 460px;
	margin: 20px;
	border: 1px solid #000;
}

<div class="zig"></div>