在HTML中显示对角分数

我关注了StackOverflow中的许多帖子，但它们都在谈论堆叠分数。
我正致力于像这样显示对角线分数：

这是我的密码：

*{
字体大小：50px；
}
.集装箱{
显示：内联网格；
网格模板列：自动；
网格模板行：自动；
边框：1px纯红；
}
.分子{
网格柱：1/2；
网格行：1/2；
边框：1px纯绿色；
}
.分母{
网格柱：2/3；
网格行：2/3；
边框：1px纯绿色；
}

35


174113一种简单的方法是只使用下标标记和上标标记

<p>This text contains <sup>23</sup>/<sub>24</sub> of a number</p>

此文本包含23/24个数字


此文本包含23/24个数字
您可以尝试下面这样的伪元素。您还可以大大简化网格代码：


*{
字体大小：50px；
}
.集装箱{
显示：内联网格；
}
.分母{
网格柱：2；
网格行：2；
}
.分子{
位置：相对位置；
}
.分子：之后{
内容：“；
位置：绝对位置；
左：100%；
/*给顶部和底部相同的值*/
最高：50%；
底部-50%；
宽度：3倍；
背景：黑色；
变换：旋转（45度）；/*根据需要调整此值*/
}
/*无关风格*/
.集装箱{
边框：1px纯红；
}
.分子{
边框：1px纯绿色；
}
.分母{
边框：1px纯绿色；
}
35


174113
您可以通过以下方式获得接近的结果：


*{
字体大小：50px；
}
.集装箱{
边框：1px纯红；
}
.分子：：之后{
内容：“/”；
字号：1rem；
位置：绝对位置；
}
.分子{
字体大小：0.5rem；
边缘底部：20px；
垂直对齐：文本顶部；
}
.分母{
字体大小：0.5rem；
垂直对齐：文本底部；
}

323
5.



17
4113
下面是使用旋转变换的另一种方法


分数{
显示器：flex；
证明内容：中心；
宽度：50px；
变换：旋转（16度）；
字体大小：1.8rem；
}
.分母，
.分子{
变换：旋转（-16度）；
}
.分母{
显示器：flex；
对齐项目：柔性端；
}
.分开{
字体大小：3rem；
}

3.
/
5.
您还可以进行混合，查看
垂直对齐
、伪元素（甚至是
背景
来画一条线）和专用html标记，如
&

这里有一个可能的组合


span，
啜饮，
b{
显示：内联块；
填充：0.2米0.0
}
.PI{font-weight:粗体；font-family:草书}
b、 机器人：以前{
内容：''；
位置：绝对位置；
高度：1.5em；
底部：0；
左边距：-.3em；
边框：实心1px；
变换：旋转（30度）
}
.机器人{
填充：0.2米；
;
垂直对齐：-.5em；
职位：相对
}
.免责声明{颜色：番茄；}

（169）2=&pi；3160493827160494大约是公元前1800年！
我知道这些，但这些只是少数。我想要一个可以处理任何文本的解决方案。有一个“分数斜杠”Unicode字符：⁄`（U+2044）。可能看起来比普通斜杠好一点。这个技巧有效，但前提是分子和分母由一个数字组成。只要有一个以上的数字，分数就超出范围。如果有一个以上的数字，
css
将必须调整以说明这些数字