I have an idea to create a div containing three texts, rotate it, and place it in a fixed position on the page. My goal is to make sure it fits perfectly on the screen.
To achieve this, I initially created a div with height and width that were the opposite of what was required and then rotated it accordingly. However, I am facing some difficulties in properly positioning it at the desired spot (top: 0, right: 40px).
Below is the code snippet where I attempted to adjust the div’s placement:
.page {
width: 100%;
heigth: 100%;
background-color: #fefefe;
}
.green-band {
height: 90px;
width: 100vh;
padding: 0 30px;
background-color: green;
display: flex;
justify-content: space-between;
align-items: center;
transform: rotate(-90deg);
position: fixed;
top: 0;
right: 40px;
}<div class="page"></div>
<div class="green-band">
<div class="text-inside">Text 1</div>
<div class="text-inside">Text 2</div>
<div class="text-inside">Text 3</div>
</div>Could someone assist me in correctly adjusting the position of the div?