css 制作响应式椭圆 block

Question

我正在尝试为下图中显示的数字制作一个 css block 。我的想法/目标是制作一个响应式 block ，这样如果有一个数字，它将是圆形的，如果有两个，则像第二个一样。我曾尝试制作 border-radius: 50% 所以我成功完成的第一个 block 与 border-radius: 50% 的图像不一样

所以我的问题是可以用一个类 block 或每个按钮(左 | 右)产生这样的结果我需要为每个 block 编写特殊类吗？

Answer 1

对于椭圆使用 100%:

border-radius: 100%;

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

border-radius: 9999px;

例子

.round{
  display: inline-block;
  width:50px;
  height:50px;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.ellipse,.stadium{
  width: 80px;
}

.stadium{
  border-radius: 9999px;
}

<div class="round circle"></div>
<div class="round ellipse"></div>
<div class="round stadium"></div>