如何使用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元素，幀（包裝）和內容，其中我假設是一個段落。 Check it out on jsfiddle。

想法是在這兩個HTML元素上使用:before和:after僞元素來添加角點。 2個HTML元素的2個僞元素允許我們創建4個角落。

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

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

Answer 3

演示：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; }