Sanjeev K Sanjeev K - 4 months ago 8
CSS Question

Issue with CSS transform property - Cant adjust backgound color

I am trying to create a box with the text on left with rotate from top to bottom but cant handle the width of the background, background color is showing additional but when I reduce the width, height is also getting reduced, here is the JSFiddle for the code I have created.

Text should also start from top width should not be showing extra.

HTML
Code is

<div class="box">
<span>Vertical Text</span>
</div>


And the
CSS
is

.box {
position: relative;
width: 100%;
float: left;
border: 2px solid #444;
min-height: 150px;
box-sizing: border-box;
}
.box > span {
position: absolute;
left: 0;
top: 0;
background: #f00;
color: #fff;
width: 150px;
min-height: 150px;
font-size: 14px;
font-family: arial;
transform: rotate(-90deg);
}


Result I am looking is as attached below

enter image description here

Answer

Example JsFiddle box-sizing: border-box; was the reason for the overflow

text-aling: right; will set text to top

.box {
  position: relative;
  width: 100%;
  float: left;
  border: 2px solid #444;
  min-height: 150px;
}

.box > div {
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  background: #f00;
  color: #fff;
  width: 20px;
  min-height: 150px;
  font-size: 14px;
  font-family: arial;
  transform: rotate();
}

.box > div > p {
  transform: rotate(-90deg);
}
<div class="box">
  <div>
    <p>Text</p>
  </div>
</div>

Comments