html - Div 进度条方向

Question

我有两个垂直实现的进度条以节省一些空间，但是，由于 html 向下构建内容，因此进度条的填充是向下而不是向上增长。我想知道如何让进度条向上而不是向下？我不能拥有绝对位置(我查过的很多指南都建议这样做)因为进度条的值是在服务器中计算然后发送到客户端并通过 J Query(.css 函数)设置的百分比).下面是单个进度条的代码(我有两个，每个团队一个)以及演示正在发生的事情的图片。 Incorrect Orientation ;这是当前代码。 (我已将样式包含在 div 中)。这是一个实时版本:https://jsfiddle.net/blacy1551/ngn5f5ud/4/

T1: <div id="team1Cont" style="border: 1px solid black; width: 15px; 
    height: 200px; ">

   <div id="team1Div" style="background-color: #d9d9d9; width: 15px; height: 
    10%;">
   </div>

</div>

非常感谢，非常感谢任何帮助!

Answer 1

您可以将带有进度条的 div 旋转 180 度，这应该可以工作。

#team1Cont {
    transform: rotate(180deg);
}