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

Question

我正在尝试创建一个左侧文本框，从上到下旋转但不能处理背景的宽度，背景颜色显示额外但是当我减小宽度时，高度也会降低，这是我创建的代码的JSFiddle。

文字也应该从顶部宽度开始，不应该显示额外的。

HTML代码是

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

而CSS是

.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);
}

我看的结果如下所示

Answer 1

示例JsFiddle box-sizing: border-box;是溢出的原因

text-aling: right;会将文字设置为顶部

＆＃13;

＆＃13;

.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);
}

＆＃13;

<div class="box">
  <div>
    <p>Text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于border: 2px solid #444属性，您正面临这样的问题，因为它在绘制div的边框时占总宽度的150px需要2px。因此<span>的实际区域宽度为150px - (2px + 2px) = 146px（两边边界的2px）

如果您设置

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

它会解决问题。

Answer 3

试试这个，

Scroll