CSS解決方案爲文本以外的圖案

Question

我想通過運行到某些文本段的每一側的模式設置網站的一部分樣式。你看到我從PSD文件中獲取的屏幕截圖 - >http://screencast.com/t/84RCLRdSZT，紅色箭頭指向我發現難以解決的區域。

任何想法如何去做這件事？

以下是我與首發：

<div class="box"> 
    <h2>Some text here</h2> 
</div> 

和CSS：

.box { 
    width:400px; 
    height:200px; 
    text-align:center; 
    background:yellow; 
} 

h2:after,h2:before{ 
    content:""; 
    border:5px double purple; 
} 

這裏是小提琴 - >http://jsfiddle.net/HerrLoop/g63LB/1/

正如你可以看到，條紋垂直，而不是水平，你可以在我的初始屏幕截圖中看到。

Answer 1

這還不是很完美，需要你設置一個固定寬度的前/件（我能想到的最好的是使用JavaScript，如果響應是必需的），但這裏後所說：

h2{ 
    display:inline-block; 
    vertical-align:middle; 
} 
h2:after, 
h2:before{ 
    content:""; 
    margin:0px 20px; 
    border:1px solid #000; 
    border-left: 0px; 
    border-right:0px; 
    height:5px; 
    width:50px; 
    display:inline-block; 
    vertical-align:middle; 
} 

http://jsfiddle.net/daCrosby/g63LB/2/

編輯

這是一點點反應更靈敏，但還是被小尺寸類型的切斷，看起來DIS比例別人：

.box { 
    width:50%; 
    overflow:hidden; 
} 
h2{ 
    display:inline-block; 
    vertical-align:middle; 
    width:100%; 
    white-space:nowrap; 
} 
h2:after, 
h2:before{ 
    content:""; 
    margin:0px 20px; 
    border:1px solid #000; 
    border-left: 0px; 
    border-right:0px; 
    height:5px; 
    width:20%; 
    display:inline-block; 
    vertical-align:middle; 
} 

http://jsfiddle.net/daCrosby/g63LB/3/

Answer 2

嘗試此處描述的解決方案：http://kizu.ru/en/fun/legends-and-headings/

快速demo：

h2{ 
    overflow-x: hidden; 
    white-space: nowrap; 
    text-align: center; 
} 
h2:before, h2:after { 
    content: ""; 
    border: solid #000; 
    border-width: 1px 0; 
    height: 5px; 
    width: 50%; 
    display: inline-block; 
    vertical-align: middle; 
} 
h2:before { margin: 0 .5em 0 -50%; } 
h2:after { margin: 0 -50% 0 .5em; }