使用css旋轉文本右側向下

Question

我一直在構建一年的UI開發，我想探索關於設計的新結構。

所以我正在設計我的面板標題，它看起來像這樣。

截至目前我只通過引導CSS完成的默認樣式panel heading。

Answer 1

我剛剛發佈了一個示例以說明如何使其與position配合使用。如果你不需要再檢查第2段

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