CSS 테두리 효과가 있습니까?

Question

몇 달 전에 CSS 테두리 효과를 사용하여 배너가있는 웹 사이트를 발견했습니다. 나는 트릭이 깔끔하고 그것이 내 마음 속에 머물렀다 고 생각했다. 기본적으로 그들은 경계선이있는 div를 채워서 양쪽에 머리글/배너가 반전되도록 만듭니다.

_______ 
\ /
/ \ 
------- 

과 같이

...

나는 일 국경을 얻을 수있었습니다! 그러나 콘텐츠를 추가하면 가운데가 늘어납니다. 이렇게 ...

______ 
\ /
| | 
/ \ 
------ 

테두리 위로 텍스트를 뜨게하려면 어떻게해야합니까? 여기

내 현재 CSS입니다 : 내가 처음부터이, 당신은 이상한 모양의 요소 내에 배치하는 콘텐츠에 대한 position: absolute;를 사용했습니다

#header { 
    height: 120px; 
    width: 960px; 
    border-style: solid; 
    border-width: 60px; 
    border-bottom-color: #fff; 
    border-top-color: #fff; 
    border-left-color: #000; 
    border-right-color: #000;  
} 

Answer 1

, 또한 position: relative; 내부의 모든 요소를 ​​포장하십시오 컨테이너 ..

Demo

.wrap { 
    position: relative;  
} 

#header { 
    border-top: 100px solid blue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 300px; 
} 

#header2 { 
    border-bottom: 100px solid blue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 300px; 
} 

.wrap p { 
    position: absolute; 
    top: 0; 
    left: 100px; 
} 

참고 : 여기서 position: absolute;을 사용하고 있으므로 이상한 모양의 요소는 p과 아무런 연락이 없으므로 내용에 맞게 크기를 으로 설정해야합니다.

Answer 2

이와 비슷한 기능이 있습니까?

<div id="header"><div class="text">Hello</div></div> 
#header { 
height: 120px; 
width: 960px; 
border-style: solid; 
border-width: 60px; 
border-bottom-color: #fff; 
border-top-color: #fff; 
border-left-color: #000; 
border-right-color: #000; 
} 

.text { 
position: relative; 
color: #FFF; 
left: -50px; 
z-index: 10; 
} 

http://jsfiddle.net/4zGMN/