javascript – 将垂直文本与上面的条形对齐

2023年4月22日 203次阅读

我有一个条形图,条形图是垂直的.底部的文字也是垂直的,我想将垂直文本与上面的条形对齐,以便文本与条形对齐.

HTML

<div class="progress-bars vertical-bars flat">
  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="percentage">90%</span>
        <span class="skill-name">Football</span>
      </div>
    </div>
  </div>
</div>

请查看Codepen,查看整个图片.

现在我的垂直文本对齐有点混乱.如何将底部文本与我的竖条对齐？

最佳答案 您可以使用此css代码实现最终的愉快对齐：

.vertical-bars .progress-fill .skill-name {
    bottom: -30px;
    display: block;
    position: absolute;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: 0 50% 0;
}

Demo

更新：

值为50％0的变换原点将确保文本围绕其起始点旋转,然后使用translateX,我们可以轻松地将文本传输到其宽度到底部.

点赞