multicolor line

by Roberto Apasajja

HTML

<div class="st23s">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
    <div class="c6"></div>
    <div class="c7"></div>
    <div class="c8"></div>
    <div class="c9"></div>
    <div class="c10"></div>
    <div class="c11"></div>
    <div class="c12"></div>
    <div class="c13"></div>
    <div class="c14"></div>
    <div class="c15"></div>
    <div class="c16"></div>
    <div class="c17"></div>
    <div class="c18"></div>
    <div class="c19"></div>
    <div class="c20"></div>
</div>

<br><hr><br>
<div class="st23t">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>

CSS

.st23s {
    height: 4px;
    display: flex;
}
.st23s div {flex: 1}
.st23s .c1 {background: #008299}
.st23s .c2 {background: #2672ec}
.st23s .c3 {background: #8c0095}
.st23s .c4 {background: #5133ab}
.st23s .c5 {background: #ac193d}
.st23s .c6 {background: #d24726}
.st23s .c7 {background: #008a00}
.st23s .c8 {background: #094ab2}
.st23s .c9 {background: #006ac1}
.st23s .c10 {background: #ff2e12}
.st23s .c11 {background: #1faeff}
.st23s .c12 {background: #91d100}
.st23s .c13 {background: #cea539}
.st23s .c14 {background: #7f6e94}
.st23s .c15 {background: #4617b4}
.st23s .c16 {background: #ad103c}
.st23s .c17 {background: #004d60}
.st23s .c18 {background: #569ce3}
.st23s .c19 {background: #e56c19}
.st23s .c20 {background: #1b58b8}


/* 4 color */

.st23t {
    height: 4px;
    display: flex;
}
.st23t div {flex: 1}
.st23t .c1 {background: #F69087}
.st23t .c2 {background: #85CCB1}
.st23t .c3 {background: #85A9B3}
.st23t .c4 {background: #B0CB7A}