javascript - 使用 HTML 和 CSS 绘制带有填充的圆弧

Question

这是我尝试使用 HTML 和 CSS 绘制的内容:

我正在尝试绘制一个内部填充的圆弧，我尝试使用边框半径，这里是 how far I could come .

HTML 代码:

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

CSS 代码:

.box {
   width:500px; height:100px;  
   border:solid 5px #f9955e;
   border-color:#f9955e transparent transparent transparent;
   border-radius: 50%/100px 100px 0 0;
}

如有任何帮助，我们将不胜感激。

Answer 1

这个怎么样:

.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。

这是 jsfiddle:https://jsfiddle.net/h2or0xa1/

---

好的，解释如下:

我去掉了你的边框，我们不再使用它们了。 我已将 .box div 设置为具有边框半径，可在左侧创建圆弧(假设您知道这是什么，就像示例中的那样)。将 .box div 的背景设置为白色。 添加了一个 ::before 伪元素，该元素本质上是在 .box div“上方”创建一个 div。为了将其移到 div 后面，我将其绝对定位，并给它一个 z 索引 -1，将其推到 .box div 后面。这个 ::before 伪元素的背景颜色是您提供的橙色。本质上， ::before 伪元素创建一个与 box 大小相同的 div，为其着色，并将其插入 .box

后面