HTML5框架的文字在側面-不是字段集/圖例

Question

我正在建立一個引導基地，我試圖在其中創建一個框架，該框架的文本不位於左側（請參閱在MS Paint中完成的草圖）。 迄今無濟於事。

我嘗試使用字段集和圖例，並且已經能夠在圖例中的字段集的頂部創建標題，但是我無法旋轉圖例以使其位於側面。 此外，由於圖例不斷不受控制地飛行，因此字段集/傳奇解決方案在IE中無法正常工作。

因此，我想知道您是否對如何實現這一目標有任何想法。

我考慮過僅將框架和文本設置為背景的一部分，但是當我上下縮放瀏覽器窗口時，所有內容看起來都很混亂。

期待聽到您的想法。 在此先感謝您，祝您生活愉快。

想勾勒出我希望框架看起來像的例子

Answer 1

在這里 嘗試這個 演示

<div class="outerDiv">
        <div class="innerDiv">Example text here</div>
    </div>

• 的CSS

.outerDiv{ height: 300px; width: 140px; border-radius: 10px; border:2px solid green; margin: 0 auto; position: relative }

.innerDiv{
    color: green;
    font-size: 15px;
    left: -65px;
    position: absolute;
    top: 54px;  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);   
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}