HTML/CSS 中条形图的缩放问题
Scaling Issue for Bar Graph in HTML/CSS
我正在尝试使用 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
元素?
这里有一些例子:
请注意,通常使用 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 创建条形图,但在使用 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
元素?
这里有一些例子:
请注意,通常使用 SCSS 或 JS /任何 JS 框架来完成。
https://codepen.io/Victa/pen/xDqbf
https://codepen.io/dxdc100xp/pen/WwMQwE
https://codepen.io/baletsa/pen/oHcfr
提供的code
只是为了看逻辑和达到这个的过程。 SCSS 是一个不错的选择,而且使用起来并不难,就像 CSS 加了类固醇一样。