html - redondear - Medio círculo con CSS(borde, solo contorno)

box-shadow

Question

Intento crear un círculo con CSS, que se ve exactamente como en la siguiente imagen:

... con solo un div :

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

y al usar solo definiciones de CSS . No SVG, WebGL, DirectX, [...] permitido.

Intenté dibujar un círculo completo y desvanecer la mitad con otro div , y funciona, pero estoy buscando una alternativa más elegante.

Answer 1

Puede usar border-top-left-radius propiedades border-top-left-radius y border-top-right-radius para redondear las esquinas de la caja según la altura de la caja (y los bordes añadidos).

A continuación, agregue un borde en los lados superior / derecho / izquierdo del cuadro para lograr el efecto.

Aqui tienes:

.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;
}

DEMO DE TRABAJO .

Alternativamente, puede agregar box-sizing: border-box al cuadro para calcular el ancho / alto del cuadro, incluidos los bordes y el relleno.

.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;
}

DEMO ACTUALIZADA . ( Demo sin color de fondo)

Answer 2

Tuve un problema similar no hace mucho tiempo y así fue como lo resolví

.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>