不确定如何使用可缩放背景</div>制作自定义<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。这会给你这样的东西：