JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<h2>3 Segmente (20 %, 60 % & 100 %)</h2>
  <div
    class="stacked-bg"
    style="--base-color:#ffffff; --stop1:20%; --stop2:60%; --stop3:100%;"
  ></div>

CSS

:root {
  --color1: #00ff0099; /* Red */
  --color2: #ff000099; /* Purple */
  --color3: #0000ff99; /* Indigo */
  --color4: #29b6f699; /* Light Blue */
  --color5: #26a69a99; /* Teal */
  --color6: #66bb6a; /* Green */
  --color7: #d4e157; /* Lime */
  --color8: #ffca28; /* Amber */
}

/* Variante für 3 Segmente: einfach eine neue Klasse mit Layer 3 */
.stacked-bg {
  width: 100%;
  height: 25px;

  border: 1px solid black;
  border-radius: 4px;

  /* 1) Vier Farb-Layer als repeating-linear-gradient (Flat-Color) */
  background-image:
    /* Segment 1 */
    repeating-linear-gradient(
      0deg,
      var(--color1) 0,
      var(--color1) 100%,
      transparent 100%
    ),
    /* Segment 2 */
    repeating-linear-gradient(
      0deg,
      var(--color2) 0,
      var(--color2) 100%,
      transparent 100%
    ),
    /* Segment 3 */
    repeating-linear-gradient(
      0deg,
      var(--color3) 0,
      var(--color3) 100%,
      transparent 100%
    ),
    /* Segment 4 */
    repeating-linear-gradient(
      90deg,
      var(--color4) 0,
      var(--color4) 100%,
      transparent 100%
    );

  /* 2) Breiten:  
     1 = stop1,  
     2 = stop2-stop1,  
     3 = stop3-stop2,  
     4 = 100%-stop3 */
  background-size:
    40% 100%,
    20% 100%,
    40% 100%,
    0% 100%;

  /* 3) Positionen:  
     1 bei 0,  
     2 bei stop1,  
     3 bei stop2,  
     4 bei stop3 */
  background-position:
    0      0,
    20% 0,
    60% 0,
    100% 0;

  /* 4) Jedes Segment einmal, kein Repeat nötig */
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
    
    background-color: var(--base-color)
}