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

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

我认为这可能会让你到达那里，但如果没有实际的代码，很难说。

1. 这会将整个容器的背景设置为

   background-gradient

   。
2. 它将相同的背景渐变设置为伪

   ::after

   到具有类

   day

   的

   today

   元素（这是您可能需要针对应用程序进行修改的位置）。
3. 我们没有在

   day

   元素上设置位置，因此使用

   position: absolute

   会将

   pseudo

   元素定位在

   month

   元素上，我在该元素上设置了

   position: relative

   。
4. 然后您可以使用

   clip-path: content-box;

   将

   pseudo

   视图限制为仅

   .today

   类元素。

:root {
  --color-border: lightgray;
  --color-fill: white;
  --color-gradient-calendar-past: green;
  --color-gradient-calendar-now: red;
}

div.month {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  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.day {
  height: 200px;
}

div.today::after {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-now) 1.5rem, var(--color-gradient-calendar-now) 3rem);
  
}


div.today {
  clip-path: content-box;
}

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