如何在css中创建具有背景的灵活div

我正在尝试创建一个灵活的div，背景如下所示，关于如何在css中实现它，有什么建议吗

---

为了获得最佳的跨浏览器兼容性，我建议将框分为三部分：

顶部和底部部件没有变化。中间的一个应具有3倍的高度和全宽，并在y轴上重复

<div id="shadowbox">
  <div class="content">Your Content here</div>
  <div id="boxending"><!-- --></div>
</div>

#shadowbox {
 background: url(box_top_bg.gif) 0 0 no-repeat;
}

#shadowbox.content {
  background: url(box_content_bg.gif) 0 0 repeat-y;
  margin-top: //as high, as the top picture is
}

#boxending {
  background: url(box_bottom_bg.gif) 0 0 no-repeat;
}

你的内容在这里
#暗箱{
背景：url（box\u top\u bg.gif）0 0不重复；
}
#shadowbox.content{
背景：url（box\u content\u bg.gif）0 0重复-y；
页边距顶部：//与顶部图片一样高
}
#拳击{
背景：url（box\u bottom\u bg.gif）0 0不重复；
}

---

如果不使用重置样式表，则显示行高的空div可能会出现问题。看看这个

你是说你想使用背景图像，还是你想使用纯CSS（或者，无论哪一个完成了任务）？哪一个完成了任务：）我很难让顶部三角形就位，因为它是一个动态灵活的布局。非常感谢：）感谢您的帮助：）