How to make vertical text using css? - html

Question

I am expecting some thing like the below pic. But I want to add text on that vertical border.
on that border I want to add text ex: Student detail
I already saw this link.
And also I tried this below code to rotate: -90 degree
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(-90deg);
It is working fine. But I want to merge those 5 points with that vertical text.
How to achieve it?. I am new to css

Answer 1

I think you want to do something like that >
https://codepen.io/dakata911/pen/NweMpy
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);

Answer 2

Not exactly a pure CSS solution, but it's pretty easy to get vertical text by adding line breaks, and then using pre spacing. Second example uses a bit of JS to avoid hardcoding the line breaks into the markup.
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>V
e
r
t
i
c
a
l
T
e
x
t
</h2>
const h2 = document.querySelector('h2')
h2.innerText = h2.innerText
.split('')
.join('\n')
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>Vertical Text</h2>