带有文本的HTML5框架 - 不是字段集/图例

Question

我正在构建一个引导程序基础站点，我正在尝试创建一个框架，文本附加在左边（参见附加的MS绘制草图图像）。到目前为止无济于事。

我尝试使用fieldset和legend，并且能够在图例中的字段集顶部创建标题，但我无法将图例旋转到我想要的侧面。此外，字段集/图例解决方案在IE中无法正常工作，因为图例不受控制地飞来飞去。

因此，我想知道您是否对如何实现这一目标有任何想法。

我想过将它们设置为框架和文本作为背景的一部分，但是当我上下移动浏览器窗口时，一切看起来都会非常混乱。

期待听到您的想法。提前谢谢你，祝你有个美好的一天。

Like to sketch-up example of what I would like my frame to looklike

Answer 1

试试这个 Demo Here

<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);
}