Javascript 使用HTML和CSS填充绘制圆弧

下面是我试图用HTML和CSS绘制的内容：

我试着画一个里面有填充的弧，我试着用边界半径，这是

HTML代码：

<div class="box"></div>

---

任何帮助都将不胜感激

您可以使用与圆弧重叠的正方形和圆形组合来创建圆弧。组合可以隐藏在正方形/圆形一半宽度和一半高度的容器中

.container{
高度：75px；
溢出：隐藏；
宽度：75px；
}
.盒子{
宽度：150px；
高度：150像素；
背景：橙色；
位置：相对位置；
z指数：-1；
}
.box：：之后{
位置：绝对位置；
显示：块；
内容：“；
边界半径：50%；
背景：白色；
宽度：100%；
身高：100%；
}

这个怎么样：

.box{
    position:relative;
    background:#fff;
    display:block;
    width:100px; 
    height:100px;  
    border-radius: 50% / 100px 0 0 0;
}

.box::before{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background:#f9955e;
    content:"";
}

它不需要对html进行任何更改，也不需要包装div。它只是纯CSS

以下是JSFIDLE：

---

好的，下面是解释：

我去掉了你的边界，我们不再使用了。 我已经将

.box

div设置为具有在左手边创建圆弧的边界半径（假设您知道这是什么，正如您的示例中所示）。将

.box

div的背景设置为白色。

---

在

.box

div上方添加了一个

：：在
.box
div之前创建一个div的伪元素。要将其移到div后面，我将其绝对定位，并给它一个z索引-1，它推到
.box
div后面。此
伪元素的背景色是您提供的橙色。本质上是
：：在
之前，伪元素创建一个与box大小相同的div，给它上色，并在
之后推动。box
尝试添加一些解释，而不是仅仅传递CSSExplanation added@TomKriek
.box{
    position:relative;
    background:#fff;
    display:block;
    width:100px; 
    height:100px;  
    border-radius: 50% / 100px 0 0 0;
}

.box::before{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background:#f9955e;
    content:"";
}