图片上的所有信息。
我的第二个解决方案代码:
<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/