html - CSS边框效果？

Question

几个月前，我遇到了一个带有使用 CSS 边框效果的横幅的网站。我认为这个把戏很巧妙，从那以后它就一直在我脑海中浮现。基本上，他们用边框填充了 div，以使标题/横幅在两侧倒置。

像这样...

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

我能够让边境工作！但是，当我添加内容时，中间会延伸。像这样...

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

如何使文本浮动在边框上？

这是我当前的CSS：

#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: absolute;您的内容放置在形状怪异的元素中，同时确保将所有这些元素包装在position: relative;容器中。

演示

.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/