如何使用CSS创建动态角框？

Question

如何使用CSS创建动态角框架,如下图所示？

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

    <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元素,一个框架(包装器)和内容,我假设它是一个段落.在jsfiddle上查看.

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

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

编辑:我改变了CSS所以这是一个有点更通用的,并且仍然可以工作,如果你有在那里的含量超过一个段落或标题后面的段落或甚至只是跨越.

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: " ";
}