如何使用CSS给圆圈一个“部分边框”

Question

另一位用户（@Simon Zhu）询问是否可以使用CSS创建一个带有“部分边框”的圆圈 - 尤其是一个绕圆圈超过90度旋转的部分边框。

请参阅： How to create partial circle border in CSS

答案是肯定的 - 使用clip-path和border-radius以及::before伪元素可以实现任何弧线。

见下面的答案。

Answer 1

您可以使用以下组合：

• clip-path: polygon()
• border-radius
• ::before伪元素

创建您希望的任何部分圆形边框。

工作示例：

body {
width: 420px
}

.circle {
position: relative;
float: left;
width: 112px;
height: 112px;
margin: 6px 6px 12px 6px;
padding: 6px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
}

.circle::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 124px;
height: 124px;
background-color: rgb(255, 255, 255);
}

.circle::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
margin: 12px;
background-color: rgb(255, 255, 0);
border-radius: 50%;
}

.circle:nth-of-type(1)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%);
}

.circle:nth-of-type(2)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 50%, 30% 100%, 0% 100%);
}

.circle:nth-of-type(3)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 10% 100%, 0% 100%);
}

.circle:nth-of-type(4)::before {
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.circle:nth-of-type(5)::before {
clip-path: polygon(0% 0%, 30% 0%, 50% 50%, 30% 100%, 0% 100%);
}

.circle:nth-of-type(6)::before {
clip-path: polygon(0% 0%, 10% 0%, 50% 50%, 10% 100%, 0% 100%);
}

.circle:nth-of-type(7)::before {
clip-path: polygon(0% 10%, 50% 50%, 0% 90%, 0% 100%);
}

.circle:nth-of-type(8)::before {
clip-path: polygon(0% 30%, 50% 50%, 0% 70%, 0% 100%);
}

.circle:nth-of-type(9)::before {
clip-path: polygon(0% 45%, 50% 50%, 0% 55%, 0% 100%);
}

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