css - 不同 div 高度的固定渐变

Question

我正在寻找解决我的问题的方法。我正在构建用于练习的应用程序，它显示了我在一周内每天进行了多少编码。我希望每个条都具有“静态”渐变，并且不会针对不同的高度均匀分布。这就是现在的样子，这就是我想要的样子。提前致谢！

标签： cssgradient

Answer 1

您可以混合使用像素和百分比来实现此目的：

div{
  background-image: -webkit-linear-gradient(bottom, #f00 50px, #444 150px, #3465a4 250px, #204a87 100%);
 width:50px;
 display: inline-block;
}

.one{
  height: 150px;
}

.two{
  height: 250px;
}

.three{
  height: 100px;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>