CSS转换属性存在问题-无法调整背景颜色

Question

I am trying to create a box with the text on left with rotate from top to bottom but can't 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

Answer 1

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> 

Answer 2

You are facing such problem because of border: 2px solid #444 property, as it takes up 2px from 150px of total width in drawing the border of the div. So the actual area width for the <span> would be 150px - (2px + 2px) = 146px (2px of border on either side)

If you set

.box > span 
{
    text-align:right; 
    width: 146px;
    min-height: 146px;
}

It would resolve the issue.

Answer 3

Try this,

.box > span::before{
  content:'';
  position:relative;
  margin-left:70px;
}