0

我正在尝试创建一个带有一些选项卡的网页，并且我希望未选择的选项卡“位于”活动选项卡的“后面”。我有不同外观的不同标签，一个是纯正方形，另一个是梯形。

我设法通过使用在方形标签上创建阴影效果

"-webkit-box-shadow: inset 0 -10px 30px -10px #555;"

但这不适用于梯形。

这是我的代码的简化示例：

HTML

<div id="first-tab">
</div>
<div id="second-tab">
</div>
<div id="main-content">
</div>

CSS

#first-tab {
    position:relative;
    float: left;
    background-color: #ED3627;
    -webkit-box-shadow: inset 0 -10px 30px -10px #555;
    width: 100px;
    height: 70px;
}

#second-tab {
    position:relative;
    float: left;
    margin-left: 50px;
    border-bottom: 70px solid #365F91;
    border-right: 40px solid transparent;
    height: 0;
    width: 60px;
    -webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}

#main-content {
    clear:both;
    position:relative;
    float: left;
    height: 100px;
    width: 250px;
    background-color: #365F91;
}

JSFiddle：http: //jsfiddle.net/Nx9ex/

有没有人有任何建议我可以解决这个问题？

它只需要为 Chrome 工作！

谢谢！

4

1 回答 1

0

不完美，但可以作为一个开始：

演示

它不起作用，因为第二个选项卡的高度实际上为 0px，并且位于梯形顶部，可见部分是边框。

我改变了创建梯形的方法，现在它有了所有的空间，并且角落被隐藏设置了一个透明的背景：

#second-tab {
    position:relative;
    float: left;
    margin-left: 50px;
    background: linear-gradient(-114deg, transparent 30px, #365F91 31px);
    height: 70px;
    width: 100px;
    -webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}

剩下的问题是透明边框中的阴影略微可见

于 2013-06-26T21:07:05.260 回答