0

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

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

如果这不是丰富的信息，我深表歉意，但我对如何完成最终结果一无所知。任何建议将不胜感激。

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

4

2 回答 2

0

你可以这样做

1，为标题制作一个div

在此处输入图像描述

2、制作左右两边高度为100%的div，并在两边重复这个图像

在此处输入图像描述

就像

在此处输入图像描述

于 2012-12-04T06:04:53.323 回答
0

如果您不想使用图像，您应该能够仅使用 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。这会给你这样的东西：

样品盒

于 2012-12-04T07:50:31.090 回答