Объединение фонов, унаследованных от разных классов

Question

Я хотел бы иметь несколько классов (например, red, green, blue), которые создают небольшой цветной квадрат рядом с элементом, например,

div { display: inline-block; margin: 20px; width: 20px; height: 20px; border: 1px dashed black; }
.square::before { position: absolute; display: block; margin-left: -10px; width: 8px; height: 20px; content: ''; }
.blue::before { background: linear-gradient(to bottom, blue 8px, transparent 8px); }
.green::before { background: linear-gradient(to bottom, transparent 8px, green 8px, green 16px, transparent 16px) }

Теперь, когда я использую <div class="square blue"></div> Я получаю этот результат

И использование <div class="square green"></div> дает

Теперь я хотел бы получить этот результат

Используя <div class="square blue green"></div>, но зеленое правило перезаписывает синее правило. Я знаю о нескольких css фонах, но я хочу использовать комбинации по крайней мере из 6 различных квадратов, и создание 32 правил для этого - немного грубая сила.

Есть ли способ достичь этого без добавления скрытого HTML, построение градиентов по javascript или написание экспоненциального количества css правил?

Answer 1

Вы можете сделать это с CSS переменными.
Разница между ответом @ TemaniAfif и моим заключается в том, что я использую переменные для хранения background-position значений вместо цветов:

div {
  position: relative;
  display: inline-block;
  margin: 20px;
  width: 22px;
  height: 22px;
  border: 1px dashed black;
}

.square::before {
  content: '';
  position: absolute;
  left: -10px;
  width: 8px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-image: 
    linear-gradient(#00f 8px, #00f0 8px),
    linear-gradient(#0f0 8px, #0f00 8px), 
    linear-gradient(#f00 8px, #f000 8px);
  --b: 0 -10px;
  --g: 0 -10px;
  --r: 0 -10px;
  background-position:var(--b), var(--g), var(--r)
}

.blue::before {--b: 0 0}
.green::before {--g: 0 8px}
.red::before {--r: 0 16px}

<div class="square blue"></div>
<div class="square green"></div>
<div class="square red"></div>
<div class="square blue green"></div>
<div class="square green red"></div>
<div class="square blue red"></div>
<div class="square blue green red"></div>

Answer 2

CSS переменные и один псевдоэлемент могут сделать это. Затем назначьте цвет, используя встроенный стиль, для любой комбинации, которую вы хотите, или используйте предопределенные классы:

div {
  display: inline-block;
  margin: 20px;
  width: 40px;
  height: 60px;
  border: 1px dashed black;
  position:relative;
}

.square::before {
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  right:105%;
  width: 8px;
  background-image:
    linear-gradient(var(--c1,transparent),var(--c1,transparent)),
    linear-gradient(var(--c2,transparent),var(--c2,transparent)),
    linear-gradient(var(--c3,transparent),var(--c3,transparent)),
    linear-gradient(var(--c4,transparent),var(--c4,transparent)),
    linear-gradient(var(--c5,transparent),var(--c5,transparent)),
    linear-gradient(var(--c6,transparent),var(--c6,transparent));
  background-size:100% calc(100%/6);
  background-position:
    0 calc(0*100%/5),
    0 calc(1*100%/5),
    0 calc(2*100%/5),
    0 calc(3*100%/5),
    0 calc(4*100%/5),
    0 calc(5*100%/5);
  background-repeat:no-repeat;
}

.blue {--c1:blue;}
.red {--c2:red;}
.green {--c3:green;}
.yellow {--c4:yellow;}
.purple {--c5:purple;}
.black {--c6:black;}

<div class="square blue"></div>

<div class="square blue green red"></div>

<div class="square blue yellow purple red"></div>

<div class="square" style="--c5:black;--c4:red;--c3:blue;"></div>

<div class="square yellow purple" style="--c1:black;--c2:red;--c3:blue;--c6:red"></div>