如何实现文本整体沿对角线排布但单个字母保持水平显示

实现方案 #

你可以用视口相对单位配合绝对定位实现需求，同时保证SEO正确：

1. HTML结构（保持正常文本顺序）

<h1>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
</h1>

2. CSS代码

h1 {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
h1 span {
  position: absolute;
  /* 字符居中对齐到定位点 */
  transform: translate(-50%, -50%);
  font-size: 8vw; /* 字号也用相对单位保证响应式 */
}
/* 按字符位置计算对角线坐标，5个字符就按6等分分对角线 */
h1 span:nth-child(1) {
  left: calc(100vw / 6 * 1);
  top: calc(100vh / 6 * 1);
}
h1 span:nth-child(2) {
  left: calc(100vw / 6 * 2);
  top: calc(100vh / 6 * 2);
}
h1 span:nth-child(3) {
  left: calc(100vw / 6 * 3);
  top: calc(100vh / 6 * 3);
}
h1 span:nth-child(4) {
  left: calc(100vw / 6 * 4);
  top: calc(100vh / 6 * 4);
}
h1 span:nth-child(5) {
  left: calc(100vw / 6 * 5);
  top: calc(100vh / 6 * 5);
}

方案优势

• 文本按正常顺序书写，搜索引擎抓取到的内容为ABCDE，不存在SEO问题
• 所有尺寸、定位都使用视口相对单位，自动适配任意屏幕尺寸，无需额外断点适配
• 每个字符本身未做旋转/倾斜处理，始终保持水平显示
• 如果字符数量较多，可以借助CSS变量或者Sass/LESS等预处理器循环生成定位规则，无需逐个手动编写

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