如何创建带有空边框扇区和围绕该扇区角的圆形边框的圆圈答案

【问题标题】：How to create circle with empty border sector and with rounded border around that sector corners如何创建带有空边框扇区和围绕该扇区角的圆形边框的圆圈
【发布时间】：2016-08-17 01:22:38
【问题描述】：

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

<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.：图片上的红色圆圈 - 不是问题的一部分，这只是我所说的一个示例 :)

【问题讨论】：

SVG 是现代方式。
这提供了一个 svg 和一个 CSS 解决方案来使两端圆润：Circular percent progress bar

标签： html css svg css-shapes

【解决方案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 根本不需要更改，即使弧的角度不同）。

【讨论】：

【解决方案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>

【讨论】：

超级棒！谢谢！！

【解决方案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>

【讨论】：