Como escrever em diagonal e vertical com CSS

Publicado em 05/02/2020

Neste artigo você aprenderá como escrever em diagonal e vertical com CSS, de uma forma prática e muito fácil de ser executada, utilizando apenas recursos nativos!

Como escrever em diagonal com CSS capa

Fala programador! Beleza? Bora aumentar mais um pouco o conhecimento!

As vezes para seguir o layout precisamos fazer coisas mirabolantes com HTML/CSS

E uma delas pode ser: escrever em diagonal ou em vertical

Na busca por soluções para estes problemas, podemos encontrar soluções muito complexas no caminho

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Mas podemos fazer isso de uma forma nativa, ou seja, utilizando o próprio CSS (e é a maneira mais indicada)

E para resolver este problema, utilizaremos a propriedade transform com o valor rotate

Vamos ver na prática essa questão!

Como escrever em diagonal e vertical com CSS: Prática

Primeiramente, vamos criar uma estrutura HTML base, para poder trabalhar em cima do problema:

<!DOCTYPE html>
<html>
<head>
    <title>Como escrever em diagonal e vertical com CSS</title>
</head>
<body>
    <p id="diagonal">Este texto em diagonal</p>
    <p id="vertical">Este texto em vertical</p>
</body>
</html>

Basicamente criamos uma página web com os componentes obrigatórios de qualquer site

E adicionamos dois parágrafos com ids de #vertical e #diagonal

Neles trabalharemos o nosso problema com CSS, veja a solução:

p {
    width: 200px;
    margin-top: 200px;
}

#diagonal {
    transform: rotate(-45deg);
}

#vertical {
    transform: rotate(-90deg);
}

Na primeira regra da tag p, apenas adicionei uma width para os elementos, o que é muito importante pois o parágrafo vem com 100%, por padrão, e girando o elemento pode destruir o layout

Então depois apliquei uma margin no topo, para espaçar um parágrafo do outro, mas isso deve ser ajustado conforme o seu layout, foi apenas para o exemplo

E a grande mágica acontece com o transform, utilizando o rotate podemos controlar o ângulo de rotação, que foi definido nas regras por id

Então defini -90deg e -45deg, pois se os ângulos forem positivos o elemento gira ao contrário

O resultado final é este:

texto em vertical e horizontal exemplo

Veja que o ângulo é totalmente personalizável, vai depender do seu projeto

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

Você pode testar mais valores e ver qual encaixa melhor para você, legal né? 😀

Conclusão

Vimos que para rotacionar o texto devemos utilizar a propriedade transform do CSS, com o valor rotate

E a quantidade de graus para formar o ângulo é da sua escolha, assim resolvemos nosso problema!

E por hoje é isso, até o próximo post! 🙂

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn