write text sideways within a div

nicole 0
Viewed 28

I have a div that is full height, 100% of its parent, and I would like to have text written from the bottom to the top, instead of left to right. So, I would like to rate the text 90 degrees counter clockwise, and also fill the div it is inside, maybe as a background svg is a solution?, i dont know :(

The width of the div container is unknown as its part of a responsive layout. I have linked to an image of what the goal is:

https://i.imgur.com/j99eYhR.png

html, body{
  height:100%;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
}
<div class="a">
HELLO WORLD!
</div>

css html
2 Answers

probably css transforms would be enough for this situation.

rotate(-90deg); will rotate the text

translateX(-100%) will fix the position (which originally would overflow on the top of the container

transform-origin: 0 0; tells the browser to apply those transformations from the top-left corner.

Here it is how it looks. Be aware that handling overflows is not easy if you use css transforms.

html, body{
  height:100%;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
}
.rotated {
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    display: inline-block;
    max-width: 100vh;
}
<div class="a">
   <span class="rotated">
      HELLO WORLD!
   </span>
</div>

Drago960

Try adding transform: rotate(-90deg); to the .a class

html, body{
  height:100%;
}
body{
  display:flex;
  justify-content:center;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
  transform: rotate(-90deg);
}
<div class="a">
HELLO WORLD!
</div>

Rizeen0
Related