title: Scaling Issue for Bar Graph in HTML/CSS
body: <p>I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's <code>scale</code> property. Here's my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="main"&gt;
          &lt;div style="height: 100%;" class="bar-height"&gt;&lt;/div&gt;
          &lt;div style="height: &lt;?php echo $height ?&gt;px;" class="bar"&gt;         &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I use <code>scale()</code>, this ends up scaling the <code>border</code> on each <code>bar</code>. How can I scale the <code>bar</code> element without scaling the <code>border</code>?</p>