html - 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

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

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

.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>