Argyle CSS background Pattern

Argyle Pattern

Attempt at a argyle pattern using CSS multiple backgrounds (linear-gradients).

Made with

Html
Css

Author

carpe numidium

Css

html {	
	background-color: hsl(55,45%,90%);
	background-image:
		/* Pink lines */
		linear-gradient(
		    -116deg,
			  transparent 40%,
			  hsl(0,80%,80%) 0,
			  hsl(0,80%,80%) 42%,
			  transparent 42%
		    ),
		linear-gradient(
		    116deg,
			  transparent 41%,
			  hsl(0,80%,80%) 0,
			  hsl(0,80%,80%) 43%,
			  transparent 43%
		    ),
		
		
		/* Black lines */
		linear-gradient(
		    -116deg,
			  transparent 40%,
			  hsl(0,0%,40%) 0,
			  hsl(0,0%,40%) 42%,
			  transparent 42%
		    ),
		linear-gradient(
		    116deg,
			  transparent 41%,
			  hsl(0,0%,40%) 41%,
			  hsl(0,0%,40%) 43%,
			  transparent 43%
		    ),
		
		/* Black diamonds */
		linear-gradient(
		    -115deg,
			  hsl(0,0%,40%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    -65deg,
			  hsl(0,0%,40%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    115deg,
			  hsl(0,0%,40%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    65deg,
			  hsl(0,0%,40%) 16.5%,
			  transparent 0
		    ),
		
		/* Pink diamonds */
		linear-gradient(
		    -115deg,
			  hsl(0,80%,80%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    -65deg,
			  hsl(0,80%,80%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    115deg,
			  hsl(0,80%,80%) 16.5%,
			  transparent 0
		    ),
		linear-gradient(
		    65deg,
			  hsl(0,80%,80%) 16.5%,
			  transparent 0
		    );
	background-size: 
		/* Pink lines */
		8em 8em,
		8em 8em,
		
		/* Black Lines */
		8em 8em,
		8em 8em,
		
		/* Black diamonds */
		8em 8em,
		8em 8em,
		8em 8em,
		8em 8em,
		
		/* Pink diamonds */
		8em 8em,
		8em 8em,
		8em 8em,
		8em 8em;
	background-position: 
		/* Pink lines */
		3em -8em,
		-3em -8em,
		
		/* Black Lines */
		-9em 8em,
		9em 8em,
		
		/* Black diamonds */
		0, 0, 0, 0,
		
		/* Pink diamonds */
		4em, 4em, 4em, 4em;
	}

Demo

See the Pen Argyle Pattern by carpe numidium (@carpenumidium) on CodePen.