How to place the text diagonally, but with the letters horizontally?

user_11120308 0
Viewed 104

I need to do this: example

I need to place, for example, an h1 diagonally across the screen, but the letters must remain horizontally.

I'have tried closing every letter between span and letter-spacing++, then transform: translateY++, but it doesn't convince me because I think this solution will give me too many complications in order to keep it full responsive, which is one of my main needs.

I tried too with:

<h1>
 <span>E</span>
 <span>D</span>
 <span>C</span>
 <span>B</span>
 <span>A</span>
</h1>
h1{white-space:pre}
<--And then added padding-left to every single span.-->

But I think in this case, Google will read EDCBA and I need to write ABCDE...

transform css html
1 Answers

This is how you can fix your first approach:

Use a transform rotate() on the parent h1 to get the overall layout, then apply a separate transform to each letter (span) with the opposite rotation.

h1 {
  display: inline-block;
  transform: rotate(-45deg);
  transform-origin: top right;
  letter-spacing: 10px;
}

span {
  display: inline-block;
  transform: rotate(45deg);
}
<h1>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
</h1>

user_16503370
Related