Cómo crear un semi círculo con CSS

CSS le permite crear diferentes formas, como rectángulos, óvalos, círculos, cuadrados y más. Sin embargo, la forma que se encuentra principalmente en las aplicaciones web es la forma del círculo; Porque es fácil de hacer y ampliamente utilizado para fines de diseño.

Mientras diseña un sitio web, agregar semicírculos en lugar de círculos da un mejor vistazo. Además, la formación de semicírculos es fácil e interesante.

En este artículo, proporcionaremos una guía sobre cómo crear un semicírculo usando CSS.

Cómo crear un semi círculo con CSS?

Para hacer un semicírculo, usaremos el "radio fronterizo" propiedad. Esta propiedad nos ayudará a hacer un semicírculo de las siguientes maneras:

• Semi círculo desde la parte superior
• Semi círculo desde el fondo
• Semi círculo desde la izquierda
• Semi círculo desde la derecha

Elabremos cada uno por uno!

Ejemplo 1: Crea un semi círculo desde la parte superior con CSS

Para crear un semicírculo desde la parte superior, primero especificaremos el ""Elemento dentro de la etiqueta del cuerpo de nuestro archivo HTML.

Html

Ahora, establezca las dimensiones adecuadas para el DIV, como asignaremos el "ancho"Valor de propiedad como"180px" y "altura"Propiedad con valor"90px". En el siguiente paso, configure el "radio fronterizo" El valor de la propiedad "12rem 12rem 0 0"; Donde el primer dígito 12 REM recortará el lado superior izquierdo del DIV, el segundo 12REM recortará el lado superior derecho, tercero y cuarto dígito 0 cortará la parte de la Div. Por último, para dar un color al círculo, utilice el "color de fondo"Propiedad con el valor"púrpura".

CSS

div
Ancho: 180px;
Altura: 90px;
Border-Radius: 12rem 12rem 0 0;
Color de fondo: morado;

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 Border-Radius de CSS.

Ejemplo 2: Crea un semi círculo desde el fondo con CSS

Para la formación de un semicírculo desde la parte inferior, estableceremos los valores de la propiedad de Radius del borde como "0 0 12rem 12rem", Donde los dos primeros valores representan la parte superior izquierda y superior del lado derecho de la derecha. Los hemos establecido en 0 para hacer que la mitad superior del div desaparezca por completo. Para la parte inferior, solo hemos recortado un poco de abajo hacia la izquierda e inferior derecha al establecer los valores en 12rem.

CSS

div
Ancho: 180px;
Altura: 90px;
Border-Radius: 0 0 12rem 12rem;
Color de fondo: morado;

Producción

Ejemplo 3: Crear un semi círculo desde la derecha con CSS

Para hacer un semicírculo CSS a la derecha, primero, ajuste la altura y el ancho del contenedor, ya que es necesario obtener la forma adecuada del círculo. Selecciona el "ancho" como "90px" y "altura" como "180px" esta vez. Nuevamente, utilice la propiedad de Radius fronteriza con el valor "0 12rem 12rem 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 tercero valores se agregan para recortar la parte superior derecha e inferior derecha. Aplicar estos valores formará un semicírculo desde la derecha.

CSS

div
Ancho: 90px;
Altura: 180px;
Border-Radius: 0 12rem 12rem 0;
Color de fondo: morado;

Producción

Ejemplo 4: Crea un semi círculo a partir de la izquierda con CSS

Esta vez, especifique la propiedad Border-Radius a lo largo del valor "12rem 0 0 12rem"; El primer y último valor 12REM recortará el lado superior izquierdo e inferior izquierdo del DIV, estableciendo el segundo y tercer valor en 0 dejará borrar el lado superior derecho e inferior derecho del círculo del círculo. Eventualmente, se creará nuestro semicírculo del lado izquierdo.

CSS

div
Ancho: 90px;
Altura: 180px;
Border-Radius: 12rem 0 0 12rem;
Color de fondo: morado;

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 "radio fronterizo" propiedad. El semicírculo se puede crear de lado a lado, como a la izquierda, derecha, superior e inferior. En la propiedad Border-Radius, el valor inicial es para la parte superior izquierda, la segunda es para la parte superior derecha, la tercera es para la parte inferior derecha y el cuarto valor es para el lado inferior izquierdo. Este artículo ha explicado cómo crear un semicírculo con CSS.