图片上的所有信息。
我的第二个解决方案代码:

<div class="content">
  <div class="circle">
  </div>
</div>

.content {
  width: 300px;
  padding: 50px;
  background: #3f63d3;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid #fff;
  border-top-color: transparent;
  transform: rotate(45deg);
}

这是一个JSFiddle example
有什么想法吗?
图像示例:
附:图片上的红圈不是问题的一部分,只是我所说的一个例子:)

最佳答案

正如palie_d在他的评论中提到的,实现您所需要的最佳方法是使用svg。通过设置stroke-linecap as round,可以使用单个路径元素完成此操作。然后,我们可以将其定位在htmldiv容器中(如果需要,绝对定位)。
您可以在this MDN tutorial中找到有关svg的path元素及其各种命令的详细信息。

svg {
  height: 100px;
  width: 100px;
  fill: none;
  stroke: red;
  stroke-width: 8;
  stroke-linecap: round;
}

<svg viewBox='0 0 100 100'>
  <path d='M95,50 A45,45 0 0,1 5,50 A45,45 0 0,1 50,5' />
</svg>

使用css可以做到这一点,但与svg相比,这将是非常复杂的(特别是当弧的角度可以变化时-它将需要调整css中的位置等,而svg根本不需要改变,即使弧的角度变化)。

关于html - 如何创建带有空边界扇形并且在该扇形拐 Angular 周围具有圆形边界的圆,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36810304/

10-12 00:17
查看更多