Scaling Issue for Bar Graph in HTML/CSS

Question

I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's scale property. Here's my code so far:

    .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>

When I use scale(), this ends up scaling the border on each bar. How can I scale the bar element without scaling the border?

Answer 1

You've some examples here:

note that it's usually done with SCSS or JS /any JS framework.

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

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

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

the code provided is only to see the logic and the procedure for reach this. SCSS is a good option and not too difficult to use it's like CSS on steroids.