css制作响应性椭圆块

我正在尝试为下图所示的数字制作一个css块。我的想法/目标是制作一个响应块，所以如果有一个数字，它将是圆形的，如果有两个，那么就像第二个一样。我已经尝试使边界半径：50%，所以我第二次成功的第一个块与边界半径：50%的图像不同

所以我的问题是，有没有可能用一个类块生成这样的结果，或者对于每个按钮（左|右），我需要为每个块编写特殊的类

对于椭圆，使用100%：

border-radius: 100%;

对于体育场，请使用px中的大值：

border-radius: 9999px;

例子

.round{
显示：内联块；
宽度：50px；
高度：50px；
背景：红色；
边界半径：100%；
利润率：10px；
}
椭圆体育场{
宽度：80px；
}
.体育场{
边界半径：9999px；
}

div{
高度：50px；
宽度：50px；
边界半径：9999px；
背景：红色；
文本对齐：居中；
显示：内联块；
线高：3em；
字体大小：粗体；
字体大小：16px；
}

2
28

固定高度解决方案 为此，您将需要一个“固定”高度（否则，您将需要使用jquery计算）

你需要做的是这样的事情

html，正文{背景：#222；}
div{
利润率：10px；
显示：内联块；
高度：30px；
边界半径：25px；
背景：浅蓝色；
字体大小：30px；
最小宽度：30px；
文本对齐：居中；
线高：30px；
填充：10px；
位置：相对位置；
颜色：蓝色；
}
部门：以前{
内容：“；
位置：绝对位置；
左：0；
顶部：-10px；
宽度：100%；
边框顶部：3个实心番茄；
}

1
123

您最好使用jQuery的

.height（）

方法，比如：

.height（）/2

-作为

$（this）。css（“height”）

不返回高度的计算值（在这种特殊情况下，它返回

60px

，因为两行文本的

行高度
30px
）@HashemQolami:谢谢你的提示：）（我不是Jquery专业人士）。