Estou tentando adicionar um gradiente aos dias anteriores em um calendário, mas as linhas de gradiente que não se alinham parecem um pouco meh.
div.month {
flex: 1 1 auto;
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(7, 1fr);
background-color: var(--color-border);
}
div.day {
background-color: var(--color-fill);
}
div.day + .past {
background: repeating-linear-gradient(
-45deg,
var(--color-fill),
var(--color-fill) 1.5rem,
var(--color-gradient-calendar-past) 1.5rem,
var(--color-gradient-calendar-past) 3rem
);
}<div class="month noselect">
<div class="day void"><div class="day-number"></div></div>
<div class="day past"><div class="day-number">1</div></div>
<div class="day past"><div class="day-number">2</div></div>
<div class="day past"><div class="day-number">3</div></div>
<div class="day past"><div class="day-number">4</div></div>
...
<div class="day today"><div class="day-number">17</div></div>Sem fazer os dias ao quadrado ( aspect-ratio: 1/1), é possível alinhar esses gradientes?
Eu estava pensando que talvez pudesse fazer o fundo de todo o componente com esse gradiente, mas então me deparo com o mesmo problema se quiser usar o mesmo gradiente com cores diferentes em outros dias.
