如何创建具有空边框扇区的圆圈以及围绕该扇区边角的圆形边框

Question

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

<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示例.有任何想法吗？

图片示例:

PS:图像上的红色圆圈 - 不是问题的一部分,它只是我正在谈论的一个示例:)

Answer 1

正如Paulie_D在他的评论中提到的,实现所需要的最好方法是使用SVG.可以通过设置stroke-linecapasround来使用单个路径元素完成.然后我们可以将它放在HTML div容器中(绝对定位,如果需要).

您可以path在此MDN教程中找到有关SVG 元素及其各种命令的详细信息.

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根本不需要改变,即使弧的角度变化也是如此).