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

Question

我正在构建一个 bootstrap 基础站点，我正在尝试创建一个框架，其中的文本不是在左侧附加的(请参阅在 MS paint 中完成的附加草图图像)。到目前为止无济于事。

我尝试使用字段集和图例，并且已经能够在图例中的字段集顶部创建标题，但我无法将图例旋转到我想要的一侧。此外，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{ 高度:300px； 宽度:140px； 边界半径:10px； 边框:2px 纯绿色； 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);
}