Trying to rotate text

HTML & CSS
1

Hello everyone,

I am trying to do this project for my school, but I got a problem rotating the word “Maandag” without rotating the box around it. the box around it needs to be there. all I want to rotate is the text.

.dag {
  letter-spacing: 3px;
  border-radius: 50px;
  background: linear-gradient(to right,white, grey);
  width: 100px;
  height: 100px;
  border: 2px solid white;
  color: green;
  transform: rotate(90deg);
}

when it is rotated:

1920×1080 187 KB

2

Put the text inside its own container (p tag) and rotate that instead of the cell.

3

How would I do that, I am pretty new to CSS and html ^.^

4

What does your HTML look like now?

5

1920×1080 163 KB

6

Without knowing exactly what effect you are going for the basics would be this:


.dag {
  letter-spacing: 3px;
  border-radius: 50px;
  background: linear-gradient(to right,white, grey);
  width: 100px;
  height: 100px;
  border: 2px solid white;
  color: green;

}
.dag p{
margin:0;
 transform: rotate(90deg);
}

and then html like this:

<th rowspan="9" class="dag"> <p>Maandag</p> </th>

7

Wow thanks, it actually worked. thanks for your time!.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.