Como sabemos, HTML proporciona la estructura de las páginas web, y CSS se puede utilizar para aplicar estilos. CSS también tiene diferentes propiedades de estilo que se utilizan para dibujar diferentes formas, como cuadrados, círculos, rectángulos, óvalos, líneas y más. Más específicamente, una línea es uno de los elementos más versátiles y de uso común del diseño que se pueden agregar horizontal y verticalmente.

Este artículo enseñará el procedimiento a dibujar líneas horizontales y verticales utilizando CSS. Empecemos!

Cómo dibujar una línea con CSS?

Para dibujar líneas horizontales y verticales utilizando CSS, se pueden utilizar diferentes propiedades, como:

• "zurra"
• "fronterizo"
• "fronterizo"
• "borde"

Avancemos para comprender el funcionamiento de las propiedades proporcionadas anteriormente una por una!

Html
Para dibujar líneas, en primer lugar, especificaremos el ""Elemento dentro del cuerpo de nuestro archivo HTML:

Ahora, para diseñar un div, utiliza las propiedades adecuadas. En nuestro caso, asignaremos el "color de fondo"Valor de propiedad como"#E4A2A4", y el "borde"Valor de propiedad como"2px Solid #0fafc4", Que indica su ancho, tipo y color, respectivamente, y el"altura"La propiedad se establece como"200px".

CSS

div
Color de fondo: #E4A2A4;
borde: 2px sólido #0fafc4;
Altura: 200px;

Ejemplo 1: Dibuja una línea horizontal con CSS
Por lo general, el

---

El elemento se utiliza para dibujar líneas horizontales en HTML. Sin embargo, para dibujar una línea horizontal con CSS, agregue

elemento para el encabezado y luego colocar un llamado "h_line"Dentro del DIV descrito anteriormente del archivo HTML.

Html

Linea horizontal

Ahora, use propiedades CSS para dibujar una línea horizontal:

• Usaremos el "borde"Propiedad, que está asociada con uno a tres valores para el ancho de línea, el tipo de línea y el color. El ejemplo proporcionado a continuación establece su valor como "6px RGB sólido (80,80,78)".
• Para ajustar el tamaño de la línea, hemos establecido el "ancho"Valor de propiedad como"300px".
• El "margen"El valor de la propiedad se establece como"auto”, Representando que el margen es igual a todos los lados. El "trasero"La propiedad también se puede utilizar para este propósito.

CSS

.h_line
Border-Bottom: 6px RGB sólido (80, 80, 78);
Ancho: 300px;
margen: auto;

Ahora, guarde el archivo HTML y ábralo en su navegador:

Como puede ver, hemos dibujado una línea horizontal con éxito con la propiedad fronteriza CSS.

Ejemplo 2: dibuja una línea vertical con CSS
Para dibujar una línea vertical, agregaremos

etiqueta para el encabezado y luego coloca un llamado "V_line"Dentro del DIV descrito anteriormente del archivo HTML.

Html

Linea vertical

Proporcionemos el "V_line"Div con algunas propiedades CSS. Para dibujar una línea vertical, utilizaremos:

• El "zurra"La propiedad se asigna con valores"5px RGB sólido (2, 99, 135)", Donde el primer valor representa el ancho de línea, el segundo valor representa el tipo de línea y el tercer valor indica el color.
• El "abajo a la derecha"La propiedad también se puede utilizar para el mismo propósito.
• A continuación, hemos definido el "altura"De la línea estableciendo su valor como"100px".
• Colocar "margen" como "0 Auto", Donde 0 indica la parte superior e inferior y el auto representa el margen igual a la izquierda y a la derecha.
• Para mostrar el ancho de la línea, hemos asignado el "ancho"Valor de propiedad como"2px".

CSS

.v_line
Border-izquierda: 5px RGB sólido (2, 99, 135);
Altura: 100px;
margen: 0 auto;
Ancho: 2px;

Aplicar estos valores dibujará una línea vertical como esta:

Eso es todo! Hemos utilizado diferentes propiedades CSS para dibujar líneas horizontales y verticales.

Conclusión

Puedes usar el "fronterizo" o "borde"Propiedades para dibujar una línea horizontal y el"zurra" o "fronterizo"Propiedades para dibujar una línea vertical en CSS. Esta propiedad tiene valores de uno a tres, donde el primer valor define el ancho, el segundo valor define su tipo, ya sea sólido, punteado, discontinuo o ranura y el tercer valor indica el color de la línea. Esta guía ha explicado cómo dibujar líneas horizontales y verticales con CSS.