求助：如何使用CSS将水平条转换为垂直条

没问题！把水平的红绿进度条改成垂直的其实很简单，只需要调整几个CSS属性就能实现。我给你写了一个完整的可运行示例，你可以直接参考：

完整代码示例 #

HTML #

<!-- 垂直进度条容器 -->
<div class="vertical-bar-container">
  <!-- 红色部分 -->
  <div class="bar red"></div>
  <!-- 绿色部分 -->
  <div class="bar green"></div>
</div>

CSS #

/* 垂直进度条容器 */
.vertical-bar-container {
  width: 25px; /* 垂直条的宽度 */
  height: 200px; /* 垂直条的总高度 */
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* 设置为垂直方向排列 */
}

/* 进度条通用样式 */
.bar {
  width: 100%;
}

/* 红色进度条 */
.red {
  height: 30%; /* 红色部分占比 */
  background-color: #dc3545;
}

/* 绿色进度条 */
.green {
  height: 70%; /* 绿色部分占比 */
  background-color: #28a745;
}

关键调整说明 #

• 把容器的宽高比例调换：原来水平条是宽高比例大，现在垂直条要设置成窄宽、高长的样式
• 使用flex-direction: column让内部的进度条垂直堆叠，替代原来水平布局默认的row方向
• 将原来控制水平占比的width属性，换成控制垂直占比的height属性

如果你的原有代码是用绝对定位实现的水平条，也可以用类似的思路调整：

.vertical-bar-container {
  position: relative;
  width: 25px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
}

.bar {
  position: absolute;
  width: 100%;
  bottom: 0; /* 从底部开始向上填充 */
}

.red {
  height: 30%;
  background-color: #dc3545;
}

.green {
  height: 70%;
  top: 30%; /* 绿色部分从红色部分的顶部开始 */
  background-color: #28a745;
}

这样就能得到完全符合需求的垂直红绿条啦，你可以根据自己的需求调整颜色、高度比例和容器尺寸~

内容的提问来源于stack exchange，提问作者superradio