我试图在日历中为过去的日子添加渐变,但渐变线未对齐看起来有点无聊。
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
),是否可以对齐这些梯度?
我在想也许我可以让整个组件的背景变成渐变,但是如果我想在其他日子使用不同颜色的相同渐变,我就会遇到同样的问题。