Crear línea vertical en HTML

1. Utilice la propiedad CSS border-left para crear una línea vertical en HTML
2. Modifique la etiqueta hr para crear una línea vertical en HTML

Este artículo presentará algunas formas de crear una línea vertical en HTML.

Utilice la propiedad CSS border-left para crear una línea vertical en HTML

En HTML, usamos la etiqueta hr para crear una línea horizontal, pero no hay una etiqueta para crear una línea vertical. Sin embargo, podemos simular una línea vertical usando la propiedad CSS border-left.

La propiedad border-left se utiliza para diseñar el borde del lado izquierdo. La propiedad es la abreviatura de border-left width, border-left style y border-left color.

Usar solo la propiedad border-left creará una línea vertical. Podemos crear un contenedor en HTML, seleccionarlo y aplicar la propiedad para lograr una línea vertical.

Por ejemplo, cree un div con la clase v-line en HTML, luego seleccione v-line y aplíquele algunos estilos. Establezca la propiedad border-left en thick solid #000.

A continuación, establece la propiedad height a 100% y left a 50%. Por último, establece la propiedad position en absolute.

Aquí, tendremos un borde negro en el medio de la página web. De esta manera, podemos crear una línea vertical usando la propiedad CSS border-left en HTML.

Código de ejemplo:

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

Modifique la etiqueta hr para crear una línea vertical en HTML

Podemos modificar la etiqueta hr y crear una línea vertical en HTML.

La etiqueta hr se utiliza para crear una línea horizontal. Podemos utilizar el valor máximo para la height y el mínimo para el width de la etiqueta hr.

De esta forma, la altura de la línea horizontal se alargará y el ancho se reducirá. Podemos aplicar el mismo color para la línea horizontal y su borde para que parezca vertical.

Por ejemplo, cree una etiqueta hr en HTML. En CSS, establezca la height de la etiqueta hr en 100vh y el width en .5vw.

A continuación, establezca el ancho del borde en 0. Finalmente, establezca el color y el color de fondo de la línea en #000.

Aquí, establecemos el valor 0 en border-width para que la línea vertical sea más delgada. De esta manera, hemos creado una línea vertical usando la etiqueta hr en HTML.

Código de ejemplo:

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}