不确定如何制作具有可伸缩背景的自定义<div>

Question

一直在尝试制作一个自定义侧边栏，类似于下面链接的图像。但是，我不确定如何编写自定义div (如果有必要)并合并可变边框。

我已经尝试管理多个s来实现倾斜的标题，但没有成功。我已经考虑过只使用模板作为背景图像的选项，但我不确定这是否是最好的方法，因为我理想情况下希望侧边栏由于下拉菜单而具有可伸缩性。

如果这不是丰富的信息，我很抱歉，但我只是对如何实现最终结果一无所知。任何建议都将不胜感激。

http://oi47.tinypic.com/wjce1j.jpg

Answer 1

您可以通过以下方式完成此操作

1，为标题创建div，如下所示

​

​

2，使左右两侧的div高度为100%，并在两侧重复此图像。

这就像是

​

​

Answer 2

如果你不想使用图片，你应该只需要css和html就可以做到。使用css和html这样做的好处是，它将在浏览器中更好地调整大小(尽管较新的浏览器在调整图像大小方面做得越来越好)，并且不需要时间来加载。

您可以尝试如下所示的方法。

以下是CSS样式：

#tabbox {
    position:absolute;
    width: 200px; 
    height: 200px; 
    background: black;
    border: 2px solid #C7ECFE;
    -webkit-box-shadow:-4px 6px 12px #C7ECFE; 
    -moz-box-shadow: -4px 6px  12px #C7ECFE; 
    box-shadow:-4px 6px  12px #C7ECFE; 
}
#tabbox:before {
    margin-top:-2px;
    margin-left:0px;
    height: 0;
    width: 143px;
    content:"";
    position: absolute; 
    border-bottom: 30px solid #C7ECFE;
   border-right: 60px solid black; 
}
#tabbox:after {
    position: absolute;
    top:0;
    height: 0;
    width: 142px;
    content:"";
    position: absolute; 
    border-bottom: 30px solid black;
    border-right: 60px solid transparent; 
}

然后在你的身体里用id = "tabbox“定义div即可。这将为您提供类似以下内容：

​

​