Question

我正在尝试使用一些标签创建一个网页，我希望未选中的标签“位于”活动标签的后面。我有不同外观的不同标签，一个是普通方形，另一个是梯形。

我已经设法使用

在方形标签上创建阴影效果

"-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！

谢谢！

Answer 1

不完美，但可以开始：

demo

它没有用，因为第二个标签的高度实际上是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 */
}

遗留问题是阴影在透明边框中略微可见

在Chrome中的非方形对象上插入阴影

1 个答案: