非正方形日历日期元素的重复线性渐变如何对齐？

我尝试为日历中的过往日期添加渐变，但渐变线条无法对齐，视觉效果欠佳。在不将日期元素设置为正方形（使用aspect-ratio: 1/1）的前提下，是否可以实现这些渐变的对齐？

我曾考虑为整个组件设置该渐变，但后续若要为其他日期使用不同颜色的同款渐变时，会遇到同样的问题。

现有实现代码 #

CSS 代码 #

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
  );
}

HTML 代码 #

<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>

解决方案 #

当然可以实现，核心思路是让渐变基于整个日历容器而非单个日期元素渲染，这样所有日期的渐变线条自然对齐，同时通过子元素的背景控制实现不同状态的区分：

1. 将渐变移到父容器.month：渐变全局连续，不会因单个日期元素的边界被截断错位
2. 用子元素背景覆盖渐变：普通日期用默认背景色盖住父容器的渐变，过往日期设为透明透出渐变
3. 扩展不同状态的渐变：如果需要给其他日期（比如今天）加不同渐变，只需给父容器叠加多层渐变，再通过子元素的背景属性控制显示对应层

修改后的CSS代码：

div.month {
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--color-border);
  /* 全局过往日期渐变，确保线条连续 */
  background-image: 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.day {
  /* 默认日期用纯色覆盖父容器渐变 */
  background-color: var(--color-fill);
}

div.day.past {
  /* 过往日期透明，透出全局渐变 */
  background-color: transparent;
}

/* 扩展：给today添加不同渐变的示例 */
div.month {
  /* 叠加两层渐变，上层为today的渐变 */
  background-image: 
    repeating-linear-gradient(
      -45deg,
      var(--color-today-base),
      var(--color-today-base) 1.5rem,
      var(--color-gradient-calendar-today) 1.5rem,
      var(--color-gradient-calendar-today) 3rem
    ),
    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.day.today {
  background-color: transparent;
  /* 只显示上层的today渐变 */
  background-image: linear-gradient(var(--color-today-base), var(--color-today-base));
  background-blend-mode: screen;
}

这种方案不需要强制日期为正方形，完全适配现有网格布局，同时支持后续扩展不同状态的渐变需求，维护成本低。

内容的提问来源于stack exchange，提问作者Jan Vladimir Mostert