Das ist ein Halb Kreiss
Code
#halbkreis{
width:50px;
height:100px;
background:red;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
}
Das ist ein 3/4 Kreis
Code
#dreivierkreis{
width:0px;
height:0px;
border-radius:50%;
border-right:50px solid transparent;
border-left:50px solid black;
border-top:50px solid black;
border-bottom:50px solid black;
}
und die anderen sind etwas komplizierter
Mit Javascript Hilfe könnte es so aussehen
https://codepen.io/JMChristensen/pen/Ablch
Aber du fragst ja nach CSS da muss ich auch erst mal gucken wie, das nochmal ging.
EDIT hier mit SVG und CSS