텍스트 바깥 쪽 패턴 용 CSS 솔루션

Question

웹 사이트의 특정 부분을 텍스트의 양면으로 실행하는 패턴으로 설정하려고합니다. PSD 파일에서 가져온 스크린 샷을 보시려면 ->http://screencast.com/t/84RCLRdSZT 빨간 화살표가 해당 영역을 가리키며 해결하기가 어렵습니다.

어떻게해야할까요?

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

와 CSS : 여기

는 I로 시작하고 무엇을 여기

.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

이 매우 완벽하지 않습니다 당신이 요소를 여기에 (내가 생각할 수있는 가장 반응이 필요한 경우 자바 스크립트를 사용하는 것입니다)하지만 이후/전과에 고정 폭을 설정하도록 요구 간다 :

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/

편집

이 입니다 조금보다 반응이 여전히 종류의 작은 크기로 잘라 창피를 보이는됩니다 비례에서 다른 사람 :

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