使用CSS </div>自定义<div>边框

Question

我正在尝试创建一个类似于此网站的网页：

我尝试使用该设计创建图像（中间的图像具有白色背景和顶部和底部的尖边），但结果是图像是静态的，并且在页面内容时不会动态更改变化。

我不知道是否可以通过自定义<div>边框或将设计作为背景图像上传然后动态创建来实现设计。

感谢您的帮助。

Answer 1

如果您不想使用CSS3（更多浏览器支持），请使用以下结构：

<div class="conatiner">
    <div class="pointyHeader"></div>
    <div class="content">
         your dynamic content here
    </div>
    <div class="pointyFooter"></div>
</div>

其中pointyHeader和pointyFooter具有固定的高度和背景图片。

Working jsFiddle

Answer 2

我想到了.box { position: relative; } 和.top { position: absolute; top: 0; }一样，底部.bottom { position: absolute; bottom: 0;}

在此处查看：http://jsfiddle.net/DyG8F/