HTML/CSS 中条形图的缩放问题

Question

我正在尝试使用HTML/CSS创建一个条形图，但我在CSS的scale属性上遇到了问题。这是我到目前为止的代码：

    .main {
      position: absolute;
      top: 350px;
      width: 80%;
      height: 65%;
      background-color: #1d1d1d;
      border: 20px #3f3f3f solid;
      left: 50%;
      transform: translate(-50%, 0);
    }
    
    .bar {
      position: relative;
      display: inline-block;
      width: 30px;
      margin-left: 1.1%;
      background-color: #38ff90;
      border-top: 5px #1d6d41 solid;
      border-left: 5px #1d6d41 solid;
      border-right: 5px #1d6d41 solid;
      transform-origin: bottom;
      transform: scaleY(10);
    }
    
    .bar-height {
      position: relative;
      display: inline-block;
      opacity: 0;
    }

    <div class="main">
        <div style="height: 100%;" class="bar-height"></div>
        <div style="height: <?php echo $height ?>px;" class="bar">         </div>
    </div>

当我使用 scale() 时，这最终会缩放每个bar上的border。如何在不缩放border的情况下缩放bar元素？

Answer 1

这里有

一些例子：

请注意，它通常是使用 SCSS 或 JS/任何 JS 框架完成的。

https://codepen.io/Victa/pen/xDqbf

https://codepen.io/dxdc100xp/pen/WwMQwE

https://codepen.io/baletsa/pen/oHcfr

提供的code只是为了查看实现此目的的逻辑和过程。SCSS是一个不错的选择，使用起来并不太困难，就像类固醇上的CSS一样。