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>