Check this out:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flexbox {
display: flex;
}
p {
width: 50vw;
}
img {
width: 40vw;
height: 100vh;
object-fit: cover;
}
.rotated-title {
width: 10vw;
transform: rotate(-90deg);
transform-origin: bottom right;
height: 100%;
}<div class="flexbox">
<p>Lorem Ipsum....</p>
<div class="rotated-title">
<h1>Introduction</h1>
</div>
<img src="https://source.unsplash.com/collection/402398/">
</div>I have this code and the idea is that the paragraph takes up 50vw, the div with the title 10vw and the image 40vw.
The title has to be rotated -90 degrees. And the end should always align with the top of the image. The title is dynamically filled and can be changed by the user, so whatever the title is it should always be aligned with the top.
Closest I get is this, but the problem is that the ‘rotated-title’ div’s width is much wider since it takes the width of the title when it’s not yet rotated.
Any idea how I can make it so that the div never goes over it’s width of 10vw?
h1 {
width: auto;
}
.rotated-title {
transform: rotate(-90deg);
transform-origin: top right;
align-self: end
}<div class="flexbox">
<p>Lorem Ipsum....</p>
<div class="rotated-title">
<h1>Introduction</h1>
</div>
<img src="img/test.png">
</div>related: