html - CSS 高度百分比从下到上填充

Question

好吧，我有一个容器 div，里面有一个只有边框的透明图像，看一下:

我想稍后动态地更改容器高度百分比，这样它看起来就像图形被填充了一样。随着不喜欢效果很好，随着高度百分比的增加，颜色从上到下填充。是否有可能在“类似”的情况下以某种方式从下到上填充？

这些是 css 相关值:

.like{
    width:150px;
    height:55%;
    margin-right:50px;
    float:right;
    border-radius:10px;
    background-color:#159C89;
}

.Dislike{
    width:150px;
    height:45%;
    background-color:#ff0000;
    margin-left:50px;
    float:left;
    border-radius:10px;
}

Answer 1

这个例子可能对你有帮助DEMO

<div class="battery yellow" data-max="60" data-fill="35">
  <div></div>
</div>
<div class="battery yellow" data-max="18" data-fill="9">
  <div></div>
</div>
<div class="battery green" data-max="5" data-fill="3">
  <div></div>
</div>