如何使用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>