在CSS3中创建此形状作为下拉div

Question

我正在尝试创建看起来像这样的东西：

问题是我认为最好将它保留在一个div中，因为下拉有一个内阴影和阴影。

提前致谢，如果您需要有关此问题的更多详细信息，请与我们联系。

这是我到目前为止所做的：

CSS

.rectangle {
    background: #1f8dda;
    background-image: -moz-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -webkit-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -o-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: linear-gradient(180deg, #1f8dda 0%, #114dbc 100%);
    -moz-box-shadow: 0px 0px 2px 0px #000000;
    -webkit-box-shadow: 0px 0px 2px 0px #000000;
    -o-box-shadow: 0px 0px 2px 0px #000000;
    box-shadow: 0px 0px 2px 0px #000000;
    border-radius: 0px;
    margin: 0px;
    width: 145px;
    height: 138px;
}

我还为此创造了一个小提琴：http://jsfiddle.net/yHy5n/

Answer 1

除了菜单结构看起来很奇怪之外，这里有一个我为你做的快速草图作为起点： Demo
它不是完整的解决方案，而是您可以使用的想法。

鉴于下面的标记，基本思想是分别设置主列表（h2）和子列表的列表元素的样式，并使渐变具有平滑过渡。

<ul class="nav">
    <li>HOME</li>
    <li class="active"><h2>DUNGEONS PIECES</h2>
    <ul class="subnav">
        <li>Floor<span class="count">123</span></li>
        <li>Walls<span class="count">54</span></li>
        <li>Sets<span class="count">7</span></li>
    </ul>
    </li>
</ul>

的CSS：

.active {
    background: #1f8dda;
    /* ... */
}
.active h2{
    background-image: linear-gradient(180deg, #1f8dda 34%, #228fdd 100%);
    /* ...                                                    /\ */
}            /*            gradient transition   --------------- */
.active ul { /*                                  \/              */
    background-image: linear-gradient(180deg, #228fdd 34%, #114dbc 100%);
    /* ... */
}

此外，您不再需要大部分兼容性css了 - 请查看：

Gradients
Box-shadow