使用CSS制作简单的半圆

Question

我在整个stackoverflow中搜索了此问题，但事实是，有几个答案可以解释如何这样做，但是事实证明，这些答案中没有一个能真正达到实际目的。输出的确看起来像半圆，但它不是理想的半圆。让我解释一下，我运行了圆的方程，并在半圆上移动了一些东西，但是在形状的顶部附近，我的对象偏离了，但实际上在左右两端重叠了该形状。请参见下面的三张图片

我的css在下面：

slider {
    width: 75%;
    border-right: solid 0.2vw;
    border-left: solid 0.2vw;
    border-top: solid 0.2vw;
    border-bottom-color: transparent;
    border-bottom: hidden;
    border-bottom: none;
    border-left-color: white;
    border-right-color: white;
    border-top-color: white;
    position: relative;
    border-top-left-radius: 37.7vw; /*keeping in mind the 0.2vw width*/
    border-top-right-radius: 37.7vw; /*100% 200%*/
    display: inline-block;
    padding-top: 37.5%;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

表面上，这应该是足以提供解决方案的信息，但如果您想进一步阅读，请随时。

我需要我的形状能够响应，这可以通过我编写的CSS来推断。我通过通过填充技巧固定其长宽比来保存形状。我的html在下面：

<holder>
        <slider style="top: 25%; left: 50%; transform: translate(-50%,-25%);" id="sliderx" class="slider"></slider>
        <img style="width:13%; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-45%); opacity:0;" src="~/Assets/Images/SomeImageThatIHaveNotShownInMyScreenshots.png" />
</holder>

尽管我相信我已经提供了足够的信息，并且没有必要展示holder的css或我的功能，该功能或css可以使蓝色的球移动一圈，但是我仍将它们张贴在下面：（不太相关[感觉自由跳过]）

holder {
    grid-row: span 20;
    display: block;
    position: relative;
    background-image: linear-gradient(rgba(52, 64, 122, 0.3), rgba(53, 63, 121, 0.3));
    padding: 0%;
}

    holder:hover {
        background-image: linear-gradient(rgba(52, 64, 122, 0.5), rgba(53, 63, 121, 0.5));
    }

持有人存在于css为：（不太相关[随意跳过]）的另一个元素中

divm {
    position: relative;
    height: 100%;
    z-index: 2;
    grid-column: span 30;
    overflow-y: auto;
    display: grid;
    grid-template-rows: repeat(41, 1fr);
    padding: 0px;
}

我的功能是：（不太相关[随意跳过]）

function adjuster(coordinatex) {
    var x, y, xc, yc, r;
    var leftgap = document.getElementById("sliderx").getBoundingClientRect().left - document.getElementById("holder").getBoundingClientRect().left;
    var topgap = document.getElementById("sliderx").getBoundingClientRect().top - document.getElementById("holder").getBoundingClientRect().top;
    var widthen = document.getElementById("sliderx").getBoundingClientRect().width;
    r = (widthen / 2) - ($("#sliderx").css("border-left-width").replace(/[^-\d\.]/g, '') / 2);
    xc = leftgap + (widthen / 2);
    yc = topgap + (widthen / 2);
    x = coordinatex;
    y = (-1 * Math.pow((-1 * Math.pow((x - xc), 2)) + (Math.pow(r, 2)), 0.5)) + yc;
    document.getElementById("knob").style.left = x - (document.getElementById("knob").getBoundingClientRect().width / 2);
    document.getElementById("knob").style.top = y - (document.getElementById("knob").getBoundingClientRect().height / 2);
}

我想要做的是一个完美的可扩展且响应迅速的半圆。我无法使用图像并保持宽高比，因为当球在半圆上移动时，我想将半圆的颜色更改为蓝色以显示覆盖区域。我可以轻松地通过框边框的颜色覆盖部分来完成此操作。我期待当前工作中的修复（盒边界方法），因为我的大部分代码现在都围绕着它解决。我知道其他方法，例如svg或使用图片进行绘画都可以，但是框边框方法似乎很简单。