<div class="box"></div>
<div class="box" style="--i:2"></div>
<div class="box" style="--i:1"></div>
<div class="box" style="--i:3"></div>
.box {
--colors: red, blue, green, purple; /* color array */
--n: 4; /* length of the array */
--i: 0; /* index of the color [0 to N-1] */
width: 150px;
aspect-ratio: 1;
background:
linear-gradient(var(--colors)) no-repeat
0 calc(var(--i)*100%/(var(--n) - 1))
/100% calc(1px*infinity); /* yes infinity is doing the magic */
}
/* we can easily get the index of the color */
.box:before {
content: "Index: " counter(index);
counter-reset: index var(--i);
color: #fff;
font: bold 1.5em sans-serif;
padding: .5em;
display: block;
text-align: center;
}
body {
margin: 0;
height: 100vh;
display: grid;
grid-auto-flow: column;
gap: 10px;
place-content: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.