Aligning a 90 degree flipped div with a regular horizontal div
Is it possible to put a 90 degree click on a div next to the normal horizontally?
In my example, I want the blue div ("" some text) to be vertical and next to the horizontal " bottom-right
" div. Can this be done by making it responsive? I do not want the text to be flipped, I want all the elements that I put inside this div to be flipped as well.
https://jsfiddle.net/duah6svr/1/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
background:red;
width:80%;
}
.bottom{
width:100%;
height:70%;
background:green;
float:right;
}
.bottom-right{
float:left;
height:100%;
width:80%;
background:pink;
}
.vertical-invert{
width:20%;
height:100%;
background:blue;
}
<div class="big-div">
<div class="top">
</div>
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
source to share
You can use flexbox attribute and writing-mode
. Below is a working fiddle . If you want to change the orientation of the text, you can use something else for writin-mode
as described here
Updated version : The bottom of the text is on the left side. The trick is to set writing-mode
invertical-lr
HTML:
<div class="big-div">
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
background:gray;
}
.bottom{
width:100%;
height:70%;
display: flex;
flex-direction: row;
}
.bottom-right{
width:80%;
background:pink;
}
.vertical-invert{
width: 20%;
background:blue;
writing-mode: vertical-lr;
text-align: left;
}
source to share