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

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 example。 有任何想法吗？

图片示例：

P.S。：图像上的红色圆圈 - 不是问题的一部分，它只是我正在谈论的一个示例：）

Answer 1

正如Paulie_D在评论中提到的，实现所需要的最好方法是使用SVG。通过设置stroke-linecap as round，可以使用单个路径元素完成此操作。然后我们可以将它放在HTML div容器中（绝对定位，如果需要的话）。

您可以在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根本不需要改变，即使弧的角度不同。）

Answer 2

.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);
  position: relative;
}
.circle:after, .circle:before {
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: white;
  content: ' ';
}
.circle:after {
  right: 21px;
  top: 21px;
}
.circle:before {
  left: 21px;
  top: 21px;
}

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

Answer 3

与andrei非常相似的答案，但使用阴影代替当前颜色可以轻松改变圆形颜色。

当然，SVG更多的可能性，这里改变圆形的长度意味着重新调整伪位置和大小。

/* Draw the bits of dots */

.content:before, .content:after {
  color:currentColor;
  content:'';
  position:absolute;
  z-index:1;
  border-radius:10px;
  
}
.content:before {
  box-shadow: 5px 0 ;  
  left:0;
  width:50%;
  height:9px;
}
.content:after {
  right:50px;
  bottom:-1px;
  width:9px;
  height:50%;
  box-shadow:0 -5px  ;  
}
.content + .content {color:tomato;}
/* see where bits of dots stand */
.content:hover:after, .content:hover:before {
  color:black;
  }

/* reset color ? */
.content + .content {color:tomato;}

/* original code */
.content {
  color:white;
  float:left;
  padding: 50px;
  background: #3f63d3;
  position:relative;
}

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

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