使用 CSS 一致地对齐不同旋转的文本

Question

我正在使用 HTML

<table>

创建网格。我为每行、每列和对角线都有标签。特别是，我希望标签文本与网格边缘对齐，以便较大的数字向外扩展。这是我想要实现的粗略设计：

我正在努力在 CSS 中实现对角线和垂直标签的这项工作。我尝试了

text-align

、

vertical-align

和

transform

规则的不同组合。

Answer 1

我想出了一个使用

display: inline

和

position: absolute

的工作示例：

.number-vertical {
  display: inline;
  position: absolute;
  transform: translateX(-100%) translateY(-50%) rotate(90deg);
  transform-origin: 100% 50%;
}

.number-diagonal {
  display: inline;
  position: absolute;
  transform: translateX(-100%) translateY(-50%) rotate(45deg);
  transform-origin: 100% 50%;
}

.number-other-diagonal {
  display: inline;
  position: absolute;
  transform: translateX(-100%) translateY(-50%) rotate(-45deg);
  transform-origin: 100% 50%;
}

.number-horizontal {
  text-align: right;
}

.cell-rotated-center {
  text-align: center;
  vertical-align: bottom;
  height: 6ch;
}

.cell-rotated-right {
  text-align: right;
  vertical-align: bottom;
}

.number-input {
  width: 4ch;
  height: 4ch;
  text-align: center;
}

<table>
  <tbody>
    <tr>
      <td class="cell-rotated-right">
        <div class="number-diagonal">
          <span>10</span>
        </div>
      </td>
      <td class="cell-rotated-center">
        <div class="number-vertical">
          <span>72</span>
        </div>
      </td>
      <td class="cell-rotated-center">
        <div class="number-vertical">
          <span>720</span>
        </div>
      </td>
      <td class="cell-rotated-center">
        <div class="number-vertical">
          <span>100000</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="number-horizontal">
          <span>36</span>
        </div>
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <div class="number-horizontal">
          <span>360</span>
        </div>
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <div class="number-horizontal">
          <span>360000</span>
        </div>
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
      <td>
        <input class="number-input" type="text" value="">
      </td>
    </tr>
    <tr>
      <td class="cell-rotated-right">
        <div class="number-other-diagonal">
          <span>5000</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>