Angles in linear-gradients and concrete object size
Example 1:
background:
linear-gradient(0deg, transparent 25%, rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%),
linear-gradient(-90deg, transparent 25%, rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%),
linear-gradient(-45deg, transparent 25%, silver 25%, silver 75%, transparent 75%),
white;
Example 2:
background: linear-gradient(0deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-90deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-45deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
white;
background-position: center, center, 0px 0px;
background-size: auto 100px, auto 100px, auto 100px;
Example 3:
background: linear-gradient(0deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-90deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-45deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
white;
background-position: center, center, 30px 30px;
background-size: auto, auto, auto 70px;
Example 4:
background:
linear-gradient(0deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-90deg, transparent 50px, rgba(0,0,255,0.5) 50px, rgba(0,0,255,0.5) 150px, transparent 150px),
linear-gradient(-45deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
linear-gradient(-135deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
linear-gradient(-225deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
linear-gradient(-315deg, transparent 50px, silver 50px, silver 150px, transparent 150px),
white;
background-position: center, center, 30px 30px, 100px 30px, 100px 100px, 30px 100px;
background-size: 200px 100px, 100px 200px, 70px 70px, 70px 70px, 70px 70px, 70px 70px;
background-repeat: no-repeat;