CSS Half Circle
Implementación de Half Circle
Se aplica una secuencia de implementación simple de etiquetas HTML y CSS junto con la propiedad Border-Radius de CSS. Abra el editor de texto y use el siguiente código para dibujar un medio círculo en una página web. Para la implementación de un medio círculo en HTML y CSS, hemos utilizado CSS interno que se declara dentro de la etiqueta con las etiquetas de apertura y cierre. Comience con las etiquetas HTML, abra la etiqueta de la cabeza. Luego, en el primer paso, le hemos dado el título a la página. Este nombre del título aparecerá en la parte superior de la pestaña en el navegador en el momento de la ejecución. Después de cerrar la etiqueta del título, declararemos la etiqueta de estilo. Primero, declararemos el margen y el relleno de la forma.
Diferencia B/W Margen y relleno
El margen es el espacio alrededor del objeto que desea crear. Esta propiedad se usa para el ajuste del objeto en la página, ya sea para moverse a la izquierda o a la derecha, etc. Es un área transparente que no tiene color de fondo. Un margen rodea la forma de los 4 lados.
El relleno es la parte que está presente entre el objeto creado y el contenido dentro del objeto. Este contenido puede ser una forma, texto, etc. La propiedad de relleno especifica cómo se ve un objeto dentro del contenedor. Este contenedor también contiene un color de fondo. Aumentar o disminuir el tamaño del relleno afecta el tamaño del contenido dentro de él.
Entonces, aquí dentro del código de estilo, hemos declarado tanto el margen como el relleno como 0. Esto significa que usaremos los códigos de ajuste manualmente declarando la propiedad de altura y ancho de la forma. Es necesario declarar estas propiedades como 0 en lugar de eliminarlas del código porque se considera automáticamente si no se declara cero.
*Margen: 0;
Relleno: 0;
La tercera propiedad relacionada con la forma es el color de fondo blanco. Este es el color predeterminado. Si no lo menciona, siempre será blanco. A continuación, utilizaremos el estilo del Div. Div es un contenedor para contener algunos elementos dentro de él. No tiene ningún efecto en el diseño ni el contenido hasta que le brinde ningún estilo. Aquí, hemos usado mucho efecto para el contenedor Div. Todos los efectos de la forma se aplican al contenedor Div para los ajustes. La posición del contenedor se toma como absoluta.
Las dos propiedades básicas de la forma son la ubicación y la dirección de la forma. Para ajustar la forma, usaremos los atributos superior e izquierdo. 'Top' decidirá la distancia de la forma desde el borde superior de la página web. La porción izquierda muestra la distancia de la forma desde el borde izquierdo de la página. Ambas propiedades se toman en porcentaje.
Arriba: 20%;Izquierda: 10%;
La función de transformación es una propiedad poderosa que se usa para rotar, sesgar, doblar o traducir el objeto. Una de las características más utilizadas es la característica de 'traducir' que se utiliza para mover el objeto de un lugar a otro. Al crear un medio círculo, hemos usado dos valores de desplazamiento desde la izquierda y la parte superior en porcentaje. Hemos tomado ambos valores con el signo negativo para el ajuste.
Transformar: traducir (-50%, -50%)Ahora, usaremos algunos efectos en la forma creando una propiedad como su altura y el ancho. Ambas propiedades se toman en píxeles.
Altura: 100px;Ancho: 200px;
¿Cuál es la propiedad fronteriza-radio y por qué se usa??
Border Radius es la columna vertebral de crear un círculo o un semicírculo en HTML. Esta propiedad juega un papel vital para redondear las esquinas de los bordes del borde de un objeto. Jugar con el borde y girarlos hacia el centro es un círculo perfecto. Los parámetros pueden ser de 4 valores. La propiedad de la radio fronteriza se usa para dar el valor del radio de la frontera. Los 4 valores son las propiedades de longitud, porcentaje, inicial y heredada.
Estos 4 valores se especifican en un orden específico para formar un radio de un borde:
- Arriba a la izquierda
- Parte superior derecha
- Abajo a la derecha
- Parte inferior
El radio fronterizo puede contener todos estos valores o el personalizado eliminando cualquier valor. Si se elimina el valor de la parte inferior izquierda, entonces el valor será el valor de la forma superior de la forma.
Border-Radius: 150px 150px 0 0;Para hacer un medio círculo, hemos tomado 2 valores como 150px, y los otros dos se declaran cero. Si tomamos todos los valores como 150 o cualquier otro número más cerca de él, entonces la forma resultante sería un círculo completo o un óvalo. Después de esa alineación del radio, hemos asignado el color a la forma roja. Ahora, cerraremos la sección de estilo y la sección principal también.
Dentro de la sección del cuerpo del código, declaramos un div, solo se usan las etiquetas de apertura y de cierre para DIV aquí. Todo el estilo se declara en la sección de estilo de CSS.
Ahora, guardaremos el código en el editor de texto. Asegúrese de que el archivo formado debe guardar con el nombre que tiene una extensión de HTML. Por ejemplo, muestra.HTML es el archivo, en el que estamos trabajando.
Para ejecutar el archivo de texto, abra el archivo seleccionando la opción de 'Open-with' y seleccionando cualquier navegador de su elección. Al hacer esto, el icono del archivo se reemplazará con el icono del navegador.
Verá que un medio círculo se forma con color rojo y se realizan las mismas alineaciones que habíamos declarado.
Conclusión
Se realiza una implementación de un medio círculo en CSS dando una breve introducción a HTML y CSS. Un editor de texto simple y un navegador son responsables de la ejecución de etiquetas HTML y CSS en el archivo. Hemos usado CSS interno para este propósito. Además, una propiedad importante de CSS que es la propiedad Border-Radius también se define aquí. Siguiendo esta función se forma un círculo, solo necesitamos personalizar algunos valores de la misma. Todos los efectos se declaran en la sección CSS, la sección del cuerpo solo contiene el contenedor Div.