Cómo crear un semicírculo con CSS

” elemento dentro de la etiqueta del cuerpo de nuestro archivo HTML.

---

---

HTML

< división >< / división >

Ahora, establezca las dimensiones adecuadas para el div, como asignaremos el ' ancho ” valor de la propiedad como “ 180px ' y ' altura ” propiedad con valor “ 90px ”. En el siguiente paso, configure el “ borde-radio ' El valor de la propiedad ' 12 rem 12 rem 0 0 ”; donde el primer dígito 12rem recortará el lado superior izquierdo del div, el segundo 12rem recortará el lado superior derecho, el tercer y cuarto dígito 0 cortarán la parte inferior del div. Por último, para dar un color al círculo, utilice el ' color de fondo ” propiedad con el valor “ violeta ”.

CSS

división {
      ancho : 180px ;
      altura : 90px ;
      borde-radio : 12 rem 12 rem 0 0 ;
      color de fondo : violeta ;
    }

Guarde el archivo HTML con el código mencionado y ábralo en su navegador:

Como puede ver, hemos creado con éxito un semicírculo con la propiedad CSS border-radius.

Ejemplo 2: crea un semicírculo desde abajo con CSS

Para la formación de un semicírculo desde la parte inferior, estableceremos valores de propiedad de radio de borde como ' 0 0 12 rem 12 rem ”, donde los dos primeros valores representan el radio del borde superior izquierdo y superior derecho. Los hemos puesto a 0 para que la mitad superior del div desaparezca por completo. Para la parte inferior, solo hemos recortado un poco la parte inferior izquierda y la parte inferior derecha al establecer los valores en 12 rem.

CSS

división {
      ancho : 180px ;
      altura : 90px ;
      borde-radio : 0 0 12 rem 12 rem ;
      color de fondo : violeta ;
    }

Producción

Ejemplo 3: crea un semicírculo desde la derecha con CSS

Para hacer un semicírculo CSS a la derecha, primero, ajuste la altura y el ancho del contenedor según sea necesario para obtener la forma adecuada del círculo. Selecciona el ' ancho ' como ' 90px ' y ' altura ' como ' 180px ' esta vez. Nuevamente, utilice la propiedad border-radius con el valor ' 0 12 rem 12 rem 0 ”, donde el primer valor 0 es para el lado superior izquierdo, el último valor 0 es para el lado inferior izquierdo y el segundo y tercer valor se agregan para recortar el lado superior derecho e inferior derecho. La aplicación de estos valores formará un semicírculo desde la derecha.

CSS

división {
      ancho : 90px ;
      altura : 180px ;
      borde-radio : 0 12 rem 12 rem 0 ;
      color de fondo : violeta ;
    }

Producción

Ejemplo 4: crea un semicírculo desde la izquierda con CSS

Esta vez, especifique la propiedad border-radius junto con el valor ' 12 rem 0 0 12 rem ”; el primer y último valor 12rem recortará el lado superior izquierdo e inferior izquierdo del div, establecer el segundo y tercer valor en 0 aclarará el lado superior derecho e inferior derecho del círculo. Eventualmente, se creará nuestro semicírculo del lado izquierdo.

CSS

división {
      ancho : 90px ;
      altura : 180px ;
      borde-radio : 12 rem 0 0 12 rem ;
      color de fondo : violeta ;
    }

Producción

Hemos ofrecido diferentes métodos para crear un semicírculo con CSS.

Conclusión

Para crear un semicírculo, simplemente podemos utilizar el CSS “ borde-radio ' propiedad. El semicírculo se puede crear de lado a lado, como a la izquierda, a la derecha, arriba y abajo. En la propiedad border-radius, el valor inicial es para la parte superior izquierda, el segundo es para la parte superior derecha, el tercero es para la parte inferior derecha y el cuarto valor es para la parte inferior izquierda. Este artículo ha explicado cómo crear un semicírculo con CSS.