使用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后面，我绝对定位它并给它一个-1的z-index，它推动在.box div之后。此::before伪元素的背景颜色是您提供的橙色。基本上::before伪元素创建一个与框大小相同的div，为它添加颜色，并推送.box

Answer 2

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

JSfiddle Demo

.container {
  height: 75px;
  overflow: hidden;
  width: 75px;
}
.box {
  width: 150px;
  height: 150px;
  background: orange;
  position: relative;
  z-index: -1;
}
.box::after {
  position: absolute;
  display: block;
  content: " ";
  border-radius: 50%;
  background: white;
  width: 100%;
  height: 100%;
}

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