CSS HTML

Como fazer uma linha vertical com CSS

28 de maio de 2020

Como fazer uma linha vertical com CSS

Neste artigo veremos como fazer uma linha vertical no seu projeto HTML, apenas com CSS de uma forma prática e rápida, que fica semelhante a um elemento hr.

criar linha vertical com css capa

Fala programador(a), tudo certo? Bora aprender a criar uma linha vertical!

A ideia de criar uma linha vertical é completamente diferente de só por um elemento semelhante ao hr

Que para quem não sabe exibe uma linha na horizontal, mas eu particularmente não aconselho pois acaba te limitando muito

Já da forma que veremos neste artigo, você poderá criar também linhas horizontais da forma que controle todos os aspectos dela com o CSS

Vamos então a o exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como criar uma linha vertical com CSS</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="linha-vertical"></div>
    <div id="linha-horizontal"></div>
</body>
</html>

Criamos aqui um HTML bem básico, com duas divs que vão representar nossas linhas: a vertical e a horizontal

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Agora vamos ao CSS para realizar estas linhas:

#linha-vertical {
    height: 200px;
    border-right: 1px solid red;
}

#linha-horizontal {
    width: 300px;
    border: 1px solid #000;
}

Veja o que é representado no navegador:

linha vertical com css ex 1

Agora vamos ver em detalhes o que aconteceu no código, simplesmente criamos uma div e determinamos uma altura, se a linha for vertical, ou largura, se a linha for horizontal

Isso vai servir para que nossa linha tenha o tamanho que julgarmos necessário

Por fim, determinamos uma borda que é a espessura da linha e também podemos definir a sua cor

E então a linha estará pronta, tanto na forma vertical quanto na horizontal 🙂

Conclusão

Neste artigo vimos  omo criar uma linha vertical e também linhas horizontais com CSS puro

Apenas precisamos determinar uma largura ou altura, em uma div

E depois utilizar a regra de border para manipular a espessura e cor da nossa linha

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x