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 加了类固醇一样。

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

Scaling Issue for Bar Graph in HTML/CSS

html

css

height

border

scale