Issue
I am trying to make text besides image look like this: https://i.stack.imgur.com/yorkX.png
I've tried using rotate, translateX, and translateY. This is what I've done:
.blue {
margin-top: 50px;
margin-left: 10px;
background-color: darkslateblue;
width: 200px;
height: 200px;
}
p {
transform: rotate(90deg) translateX(40px) translateY(28px);
}
<div>
<div class="blue"></div>
<p>Blue</p>
</div>
The problem with my code is whenever I change the margin of blue box, the text stays at the same position like this:https://i.stack.imgur.com/leEQm.png
I'm wondering, is there another way that if I change the margin of blue box so that the text will follow the blue-box?
Solution
p {
transform: rotate(90deg) translateX(-120px) translateY(-102px);
display: block;
right: -30px;
position: relative;
}
.blue {
margin-top: 50px;
margin-left: 10px;
background-color: darkslateblue;
width: 200px;
height: 200px;
}
.Box-out {
width: max-content;
}
<div class="Box-out">
<div class="blue"></div>
<p>Blue</p>
</div>
Answered By - Jaswinder Kaur
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.