父元素作為整個柱體，子元素作為實體用來顯示比例：

<div class="bar">
  <div class="solid_bar"></div>
</div>

父元素樣式，設置空柱子的背景：

      width: 80px;
      height: 94px;
      background-image: url(./assets/bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;

子元素樣式：使用border-image-slice屬性將子元素的實體柱背景圖切割為9份，需要將整個上方和下方進行拉伸，中間使用fill填充

      width: 50px;
      position: absolute;
      left: calc((100% - 50px) / 2);
      bottom: 12px;
      max-height: 78px;
      box-sizing: border-box;
      border: 0px solid #000;
      border-image-source: url(./assets/bar.png);
      border-image-slice: 20 0 20 0 fill;
      border-image-width: 20px 1px 20px 1px;

lQLPJxZy6aeAtxnMkc0BALA5fqkVOwAQDAK9Vtw9AIkA_256_145.png

給子元素設置動態(tài)高度：

<div class="solid_bar" :style="{ height: bar_height }"></div>

bar_height的大小自己計算得到：

  const full_height = 78;
  // 模擬外部傳入的比例
  const proportion = 0.5;
  const bar_height = ref("0");
  bar_height.value = proportion * full_height + "px";

lQLPJxZy6h9O34DMk80CdrBEgPyey4trVAK9V6ATQJYA_630_147.png