html - 如何使用CSS创建动态 Angular 框？

Question

如何使用 CSS 创建如下图所示的动态 Angular 框？

下面是我目前的解决方案，但它不够动态，因为我有两个宽度不同的内容，

    <p class="description-header">
        <span class="frame-header frame-header-top"></span>
        <span class="description-text"><?php echo $home->excerpt;?></span>
        <span class="frame-header frame-header-bottom"></span>
    </p>

CSS,

.description-header {
    position:absolute;
    bottom:0;
    right:0;
    width:182px;
    font-size:12px;
    line-height:14px;
    margin:0;
    padding:0;
    border:0 solid red;
}

.frame-header {
    display:block;
    width:182px;
    height:10px;
    float:none;
    background-image:url(../images/frame-header.jpg);
    background-repeat: no-repeat;
    margin:0;
    border:0 solid red;
}

.frame-header-top {
    background-position: top left;
}

.frame-header-bottom {
    background-position: bottom left;
}

.description-text {
    width:160px;
    display:block;
    float:none;
    margin: 0 auto;
    border:0 solid red;
}

有什么更好的主意吗？

Answer 1

这是一个激进的纯 CSS 解决方案，仅使用 1 个 HTML 元素、一个框架(包装器)和内容，我假设它是一个段落。 Check it out on jsfiddle .

想法是在 2 个 HTML 元素上使用 :before 和 :after 伪元素来添加 Angular 。 2 个 HTML 元素的 2 个伪元素允许我们创建 4 个 Angular 。

我只在 Chrome 和 Firefox 中测试过它。

---

编辑:我更改了 CSS，使其更通用一些，如果您的内容超过一段或 a heading followed by paragraphs，它仍然可以工作或 even just spans .

HTML

<div class="frame">
    <p>
        Lorem ipsum dolor...
    </p>   
    <p>
        Mauris bibendum mauris non
    </p>
</div>

CSS

.frame {
    position:relative;
    padding:5px;
}
.frame:before {
    height:10px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    border-left:1px solid black;
    border-right:1px solid black;
    content: " ";
}
.frame:after {
    height:10px;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-left:1px solid black;
    border-right:1px solid black;
    content: " ";
}
.frame > p {
    text-align:justify;
    margin:0;
    padding:0;
}
.frame :first-child:before {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    width:10px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    content: " ";
}

.frame :first-child:after {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    width:10px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    content: " ";
}