如何创建具有空边界扇区和围绕该扇区角的圆角边框的圆圈

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>

如何创建具有空边界扇区和围绕该扇区角的圆角边框的圆圈

How to create circle with empty border sector and with rounded border around that sector corners

html

css

svg

css-shapes