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

【问题标题】：Scaling Issue for Bar Graph in HTML/CSSHTML/CSS 中条形图的缩放问题
【发布时间】：2018-08-18 10:52:03
【问题描述】：

我正在尝试使用 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 元素？

【问题讨论】：

首先，我们看不到您的 php 响应了哪个高度，此外，当我运行您的代码的 sn-p 时，什么也没有发生（没有内容、颜色等来查看发生了什么以及如何帮助您）。请添加值和可以显示的内容，使用固定值，然后您只需为您的 php 变量更改它。

标签： html css height border scale

【解决方案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 那样难。

【讨论】：