Comment utiliser CSS pour donner un cercle à une "bordure partielle"

Question

Un autre utilisateur (@Simon Zhu) a demandé s'il était possible d'utiliser CSS pour créer un cercle avec une "bordure partielle" - en particulier une bordure partielle qui contourne plus de 90 degrés du cercle.

Voir:How to create partial circle border in CSS

La réponse est oui - tout arc est possible en utilisant clip-path et border-radius et le pseudo-élément ::before.

Voir la réponse ci-dessous.

Answer 1

Vous pouvez utiliser une combinaison de:

• clip-path: polygon()
• border-radius
• ::before pseudo-élément

pour créer une bordure de cercle partiel que vous souhaitez.

de travail Exemple:

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>