Halve cirkel met CSS (rand, alleen omtreklijnen)

Ik probeer een cirkel te maken met CSS, die er precies zo uitziet als op de volgende afbeelding:

…met slechts één div:

<div class="myCircle"></div>

en door alleen CSS-definities te gebruiken. Geen SVG, WebGL, DirectX, […] toegestaan.

Ik heb geprobeerd een volledige cirkel te tekenen en de helft ervan te vervagen met een andere div, en het werkt, maar ik ben op zoek naar een eleganter alternatief.

Antwoord 1, autoriteit 100%

U kunt border-top-left-radiusen border-top-right-radiuseigenschappen om de hoeken van de doos af te ronden volgens de hoogte van de doos (en toegevoegde randen).

Voeg vervolgens een rand toe aan de boven-/rechter-/linkerkant van het vak om het effect te bereiken.

Hier ga je:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

WERKDEMO.

U kunt ook box-sizing: border-boxtoe aan het vak om de breedte/hoogte van het vak te berekenen, inclusief randen en opvulling.

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

GE-UPDATE DEMO. (Demozonder achtergrondkleur)

Antwoord 2, autoriteit 14%

Ik had niet lang geleden een soortgelijk probleem en zo heb ik het opgelost

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}

<div class="rotated-half-circle"></div>

       border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;

.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}

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

.top {
  height: 30px;
  width: 30px * 2;
  border-top-left-radius: 30px * 2;
  border-top-right-radius: 30px * 2;
}

<div class="top"></div>