1

如何使用 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;
}

有更好的想法吗？

4

3 回答 3

6

这是一个激进的纯 CSS 解决方案，仅使用 1 个 HTML 元素、一个框架（包装器）和内容，我假设它是一个段落。在 jsfiddle 上查看。

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

我只在 Chrome 和 Firefox 中测试过。

编辑：我更改了 CSS，所以它更通用一点，如果你有超过一个段落的内容，或者一个标题后面跟着段落，甚至只是 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: " ";
}
于 2013-03-14T16:51:58.067 回答
2

你可以尝试这样的事情：

html:

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

CSS：

.description-header{
    position:absolute;
    bottom:0;
    right:0;
    width:182px;
    font-size:12px;
    line-height:14px;
    margin:0;
    border:0 solid red;
    background: url(../images/frame-header.jpg) left top no-repeat, url(../images/frame-header.jpg) left bottom no-repeat;
    padding: 10px;
}
于 2013-03-14T16:24:47.190 回答
1

演示：http: //jsfiddle.net/4QkYA/

-- html --

<div class="frame">
    <div class="top-l"></div>
    <div class="top-r"></div>
    <img src="http://lorempixel/200/200/sports/2" alt=""/>
    <div class="bottom-l"></div>
    <div class="bottom-r"></div>
</div>

--css --

img {
    margin: 0;
    padding: 3px;
    position: relative;
    z-index: 1;
    display: block;
}

.frame {
    position: relative;
    display: inline-block;
}

.frame > div {
    width: 18px;
    height: 18px;
    border: 3px solid black;
    position: absolute;
    z-index: 0;
}

.top-l { top: 0; left: 0; }
.top-r { top: 0; right: 0; }
.bottom-l { bottom: 0; left: 0; }
.bottom-r { bottom: 0; right: 0; }
于 2013-03-14T16:29:07.980 回答