Html 如何使半圆更薄、宽度更小？

我试图修改一个现有的css，并使带有

#E9EEF2

颜色的半圆变薄，宽度变短，但没有任何运气。到目前为止，我所做的一切都是打破现状。 这是我到目前为止对HTML的了解：

.content{
显示器：flex；
}
.面具{
位置：相对位置；
溢出：隐藏；
显示：块；
宽度：12.5em；
高度：6.25em；
保证金：1.25em；
}
.半圆{
位置：相对位置；
显示：块；
宽度：12.5em；
高度：6.25em；
背景：#A148F7；
边界半径：50%50%50%50%/100%100%0%0%；
}
.半圆：：之前{
内容：“；
位置：绝对位置；
底部：0；
左：50%；
z指数：2；
显示：块；
宽度：8.75em；
高度：4.375em；
左边距：-4.375em；
背景：#E9EEF2；
边界半径：50%50%50%50%/100%100%0%0%；
}
.半圆-遮罩{
位置：绝对位置；
排名：0；
左：0；
宽度：12.5em；
身高：12.5公分；
背景：透明；
变换：旋转（120度）平移3D（0,0,0）；
变换原点：中心；
背面可见性：隐藏；
过渡：所有.3s易于输入输出；
}
.半圆--mask:：before{
内容：“；
位置：绝对位置；
排名：0；
左：0%；
z指数：2；
显示：块；
宽度：12.625em；
高度：6.375em；
保证金：-1px0-1px；
背景：#dbdb；
边界半径：50%50%50%50%/100%100%0%0%；
}
.量规--1.半圆{
背景：#A148F7；
}

通过修改

.semi-circle::before {
  ...
  width: 8.75em;
  height: 4.375em;
  margin-left: -4.375em;
  ...
}

---

这个块在中间设置了明亮的半圆盘，所以如果你做得更大，外部的“量规”变得更薄。

如果增加内半圆的大小，可以使半圆变薄：

.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 10.75em;
height: 5.375em;
margin-left: -5.375em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

---

要使环变薄，需要增大内半圆的大小，该内半圆隐藏了外半圆的一部分，使其看起来像一个环。例如，修改

之前的
半圆：：的宽度、高度和负左边距

要使整个东西变小，需要减小所有
.mask
、
.semi-circle
、
.semi-circle--mask
和
.semi-circle--mask:：before
的宽度和高度。然后当然也要改变上面提到的小半圆，以适应新的尺寸和你想要的环的厚度

请注意，所有高度应为同一图元宽度的一半。
.semi circle:：before
的左边距应为同一元素宽度的负一半

使用8em宽量规和稍薄环的示例：


.content{
显示器：flex；
}
.面具{
位置：相对位置；
溢出：隐藏；
显示：块；
宽度：8em；
高度：4em；
边缘：1米；
}
.半圆{
位置：相对位置；
显示：块；
宽度：8em；
高度：4em；
背景：#A148F7；
边界半径：50%50%50%50%/100%100%0%0%；
}
.半圆：：之前{
内容：“；
位置：绝对位置；
底部：0；
左：50%；
z指数：2；
显示：块；
宽度：6em；
高度：3em；
左边距：-3em；
背景：#E9EEF2；
边界半径：50%50%50%50%/100%100%0%0%；
}
.半圆-遮罩{
位置：绝对位置；
排名：0；
左：0；
宽度：8em；
高度：8em；
背景：透明；
变换：旋转（120度）平移3D（0,0,0）；
变换原点：中心；
背面可见性：隐藏；
过渡：所有.3s易于输入输出；
}
.半圆--mask:：before{
内容：“；
位置：绝对位置；
排名：0；
左：0%；
z指数：2；
显示：块；
宽度：8em；
高度：4em；
保证金：-1px0-1px；
背景：#dbdb；
边界半径：50%50%50%50%/100%100%0%0%；
}
.量规--1.半圆{
背景：#A148F7；
}