CSS Halbbogen um den vollen Kreis

Question

Ich versuche, einen Halbbogen um einen vollen Kreis wie unten zu erstellen. Wie würde ich das in CSS erstellen? Bis jetzt habe ich nur den Kreis erstellt, aber keine Ahnung, wie man den Bogen macht.

.circle { 
 
    width: 45px; 
 
    height: 45px; 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    position: relative; 
 
    background: #BDBDBD; 
 
}

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

Answer 1

Sie :after Pseudoelement verwenden können Halbkreis zu schaffen. Sie müssen auch bottom-right und top-right border-radius verwenden.

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 50px; 
 
    position: relative; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    background: #BDBDBD; 
 
    color: white; 
 
} 
 

 
.circle:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border: 10px solid gray; 
 
    border-left: 0; 
 
    border-bottom-right-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
    width: 55px; 
 
    height: calc(100% + 10px); 
 
    transform: translate(15px, -15px); 
 
}

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

Answer 2

sich auf die Frage auf jcaron Kommentar Dieses basiert. Ich habe den Kreis mit einem äußeren Kreis-Div umwickelt, um den Bereich "weißer Raum zwischen Grautönen" zu erzeugen.

Nenad Vracars Antwort scheint jedoch viel sauberer zu sein.

.outer-circle { 
 
    width: 45px; 
 
    height: 45px; 
 
    border-style: solid; 
 
    border-width: 1x 1px 0 0; 
 
    border-color: #BDBDBD #BDBDBD transparent transparent; 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    position: relative; 
 
    background: #fff; 
 
    padding: 3px; 
 
    transform: rotate(45deg); 
 
} 
 

 
.circle { 
 
    background: #BDBDBD; 
 
    border-radius: 50%; 
 
    transform: rotate(-45deg); 
 
}

<div class="outer-circle"> 
 
    <div class="circle"> 
 
    1 
 
    </div> 
 
</div>

Answer 3

Ja verwenden pseudo selector, aber Ihr parent Hintergrund benötigt white oder jede andere Farbe sein, die mit Pseudo-Selektor das heißt der Mittelteil zwischen Kreis und Halbbogen oder tun verschmelzen die Leinwand verwenden.

body { 
 
    background: #fff; 
 
} 
 

 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-top: 30px; 
 
    color: #fff; 
 
    padding-top: 40px; 
 
    box-sizing: border-box; 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 70px solid transparent; 
 
    border-left: 70px solid transparent; 
 
    border-right: 70px solid #ccc; 
 
    border-bottom: 70px solid #ccc; 
 
    border-radius: 50%; 
 
    z-index: -2; 
 
    transform: rotate(-45deg); 
 
    left: -15px; 
 
    top: -20px; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 60px solid transparent; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid #fff; 
 
    border-bottom: 60px solid #fff; 
 
    border-radius: 50%; 
 
    z-index: -1; 
 
    transform: rotate(-45deg); 
 
    top: -10px; 
 
    left: -7px; 
 
}

<div>1</div>