使用css将文本右侧向下旋转

Question

我一直在构建UI开发一年，我想探索设计方面的新结构。

所以我正在设计我的面板标题，它看起来像这样。

截至目前，我只通过bootstrap css完成panel heading的默认样式。

Answer 1

我刚刚发布了一个示例，了解如何使用position。如果您不需要，请检查第二个片段

.main {
  position:relative;
}

.tilt {
  position:absolute;
  top:30px;
  left:0px;
  transform:rotate(-90deg);
  color:#000;
  padding:0 10px;
  border:1px solid #000;
  text-align:center;
}
.tilt p {
  margin:0px;
}

<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>

 .tilt {
  transform:rotate(-90deg);
  color#000;
  padding:0 10px;
  border:1px solid #000;
  text-align:center;
  display:inline-block;
  margin-top:22px;
}
.tilt p {
  margin:0px;
}

<div class="tilt">
<p>
HELLO
</p>
</div>