如何在网页中实现响应式斜向叠加文本（错误/加载页场景）

我想在网站中制作自定义错误/加载页面，将错误码或如error、loading这类动态文本以大粗体斜跨页面显示。理想情况下仅用CSS实现，若无法实现也可接受用JavaScript定位字符。同时希望文本在小屏幕上产生重叠效果，但不知如何实现。

已尝试的思路 #

• 使用absolute定位：但字符宽度会随内容变化，不确定如何精准居中，或许改用等宽字体能解决？以下是我的示例代码：

.digit {
  font-size: 100px;
  position: absolute;
}

.digit:first-child {
  top: 0;
  left: 0;
}

.digit:nth-child(2) {
  top: 50%;
  left: calc(50% - 1em);
}

.digit:last-child {
  bottom: 0;
  right: 0;
}

<div class="error">
  <div class="code">
    <span class="digit">4</span>
    <span class="digit">0</span>
    <span class="digit">4</span>
  </div>
</div>

• 居中后调整字间距：考虑先将文本居中，再基于视窗宽度（vw）和文本长度调整字母间距，但不知道如何单独偏移单个字符的上下位置。

有没有人遇到过类似需求？或是有我没想到的更好方案？

效果参考 #

• 斜向字符布局效果：
• 移动端重叠效果（字符背景应为透明，无遮挡）：

内容的提问来源于stack exchange，提问作者Hugo