CSS实现手机信号格（Vue）

效果图

Vue代码

<!-- active值为12345 -->
<div class="signal">
    <div
      class="signal-item"
      v-for="(item, index) in 5"
      :key="index"
      :style="[
        { '--i': index + 1 },
        { background: index < active ? '#409eff' : '' }
      ]"
    ></div>
</div>

.signal {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    &-item {
      width: 4px;
      height: calc(4px * var(--i));
      background: #d7d7d7;

      +.signal-item {
        margin-left: 2px;
      }
    }
}