CSSを使用してテキストを右に回転

Question

私は1年間のUI開発を構築しており、設計に関して新しい構造を探求したいと考えています。

だから私はこのようなものになると私のパネル見出しにスタイリングしています。

は、今のように私は、ブートストラップ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>