How to write texts diagonally and vertically using CSS

In this article we will learn how to write texts diagonally and vertically using CSS, in a practical and very easy way, using only native resources!

write texts diagonally and vertically using CSS cover

Hey you programmer! Are you ok? Let’s increase the knowledge a little bit more!

Sometimes to follow the layout we need to do fancy things using HTML/CSS

And one of them can be: write texts diagonally or vertically

In the search for solutions to these problems, we can find very complex solutions along the way.

But we can do this in a native way, which is, using the CSS itself (and it is the best way)

And to solve this problem, we’ll use the transform property with the value rotate

Let’s see this subject in practice!

How to write texts diagonally and vertically using CSS: Practice

First, let’s create a base HTML structure, so we can work on the problem:

<!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>

We basically create a web page running the mandatory components of any site

Then, we add two paragraphs with ids of #vertical and #diagonal

On them we will work on our problem using CSS, check it out the solution:

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

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

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

In the first rule of the <p> tag, I just added a width to the elements, which is very important because the paragraph comes on 100% by default, and rotating the element can destroy the layout

Then I applied a margin at the top, to separate one paragraph from the other, but this should be adjusted according to your layout, it was just as an example

And the great magic happens using the transform, using rotate we can control the rotation angle, which was defined in the rules by <id>

So I defined -90deg and -45deg, because if the angles are positive the element rotates in reverse

The expected result is this: