是否可以在元素之间对齐渐变？

Question

我试图在日历中为过去的日子添加渐变，但渐变线未对齐看起来有点无聊。

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>

如果不将日子变成正方形（aspect-ratio: 1/1），是否可以对齐这些梯度？

我在想也许我可以让整个组件的背景变成渐变，但是如果我想在其他日子使用不同颜色的相同渐变，我就会遇到同样的问题。

Answer 1

我会这样做：

使用渐变作为背景div.month并将其设为红色。对于正常情况div.day，您添加白色背景，对于正常情况，.past您使背景透明并添加backdrop-filter.

div.month {
    height: 23vW;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: repeating-linear-gradient(-45deg, #fff, #fff 1.5rem, #fdc5d0 1.5rem, #fdc5d0 3rem );
}

div.day {
    border: 1px solid #fff;
    background-color: #fff;
}

div.day + .past {
    background-color: #0000;
    backdrop-filter: grayscale(1) brightness(1.13);
}

div.day + .blocked {
    background-color: #0000;
}

<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 past"><div class="day-number">5</div></div>
    <div class="day past"><div class="day-number">6</div></div>
    <div class="day past"><div class="day-number">7</div></div>
    <div class="day blocked"><div class="day-number">8</div></div>
    <div class="day past"><div class="day-number">10</div></div>
    <div class="day past"><div class="day-number">11</div></div>
    <div class="day past"><div class="day-number">12</div></div>
    <div class="day past"><div class="day-number">13</div></div>
    <div class="day past"><div class="day-number">14</div></div>
</div>

通过使用grayscale(1)背景不再是红色，然后我稍微提高亮度。

我假设您想使用红色来表示阻止的日期。如果您想使用红色和灰色之外的更多颜色（例如假期绿色），您可以使用hue-rotate：

div.day + .holiday {
    backdrop-filter: hue-rotate(123deg);
}