CSS如何实现background-size属性值联动匹配，适配随字号变化的装饰角

脱离原有多背景渐变写死像素的实现限制，通过伪元素独立承载装饰层，利用CSS原生尺寸计算规则实现尺寸联动，全程无需JS、无需额外增加DOM节点。

实现逻辑 #

• 移除原有绑定在元素本体上的多背景、固定尺寸的相关样式，仅保留元素本身的布局属性
• 通过::after伪元素在元素右上角生成独立的装饰层，单独配置装饰层的尺寸规则
• 借助aspect-ratio属性强制装饰层保持正方形比例，从根源上解决两个方向尺寸不联动的问题

完整可直接替换的代码：

.top-corner {
  position: relative;
  width: fit-content;
  padding-right: 20px;
}

.top-corner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 绑定当前文本字号，字号调整时装饰角自动同步缩放 */
  width: 1em;
  /* 强制保持正方形，宽高计算结果始终等长 */
  aspect-ratio: 1;
  /* 复刻原方案的L型黑色装饰视觉效果，无视觉差异 */
  background:
    linear-gradient(to left, black 6px, transparent 6px) 100% 0,
    linear-gradient(to bottom, black 6px, transparent 6px) 100% 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

自定义适配规则 #

如果需要装饰角尺寸跟随元素整体高度自适应（而非仅绑定字号），只需调整伪元素的尺寸计算逻辑：

替换伪元素的宽度规则为按父元素高度计算的高度值，配合正方形比例自动联动生成宽度值

.top-corner::after {
  /* 可按需调整比例数值，示例为装饰角边长占父元素高度的25% */
  height: 25%;
  aspect-ratio: 1;
  /* 其余属性保持不变 */
}

该逻辑下，伪元素高度基于父元素实际高度计算得到精确像素值，再通过正方形比例自动匹配等长宽度，完全符合“装饰角为正方形、随元素高度自适应、不绑定元素宽度计算”的需求，可彻底解决调整字号时的适配错位问题。

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