CSS:；缩进；在活动菜单项下方的边框中

我有一个简单的引导navbar菜单，它工作得很好，但我想在menu div的底部添加一个小的视觉指示器，以显示哪个菜单项当前处于活动状态

这看起来应该很容易，但要特别注意的是，投影需要随着缩进移动——我们如何做这样的事情

一张图片抵得上千言万语，下面加一张

编辑添加的小提琴：

HTML

---

可能需要更多调整，但这里有一个100%CSS解决方案

在每个

li

中，您希望

处于活动状态

（您可能需要使用一些JS将这些元素插入到li处于活动状态的DOM中…）

这是一个带有

.png

图像的解决方案：

我向您添加了以下内容：

li.active{position:relative;}
li.active::after{
    content:"";
    background: transparent url("http://i41.tinypic.com/29ofuoh.png") no-repeat center center;
    background-size: 15px 17px;
    height:17px;
    width:100%;
    position:absolute;
    top:43px;
    left:0;
}

---

您可以使用如下内容。至少如果您不想使用图像并且不介意CSS转换（其他选项可能包括使用图像、使用CSS背景或SVG绘制对象）

---

？如果你没有更好的想法，也许可以尝试用这个指示器制作小图像，包括阴影，并将其相对于活动图标进行定位？一些代码或小提琴相当于一千张图片。图像想法可能有效，但直接的CSS会更好。我得到了小提琴的帮助，我会试着做一个，但是。。。我们说的是在矩形的底部添加一个缩进，对吗？小提琴：太好了！谢谢顺便问一下，你是如何制作.png的？我试着做了一个，但我对Photoshop有点一窍不通。它来自你在问题中输入的图像；）我刚刚剪了。如果你打算使用它，你应该调整它的大小显示的大小

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/* gradient for main navigation bar */
.navbar-gradient {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    /* drop shadow */
    box-shadow: 3px 3px 3px #888888;
}

    @import url('http://getbootstrap.com/dist/css/bootstrap.css');

.triangle {
    margin-top:-7px;
    width: 0;
    height: 0;
    margin-left:31px;
}
.triangle::after {
    content:'';
    border-bottom: 0;
    height: 15px;
    width: 15px;
    background-color: #fff;
    position: absolute;
    -webkit-transform: rotate(45deg);
    z-index: 2;
    box-shadow: inset 2px -4px 9px #888;
}
.triangle-cover {
    position:absolute;
    margin-top:1px;
    margin-left:-7px;
    z-index:10;
    width: 0;
    height: 0;
    border-bottom: solid 17px white;
    border-left: solid 14px transparent;
    border-right: solid 14px transparent; 
}

        <li class="active"><a href="#"><img src="http://icons.iconarchive.com/icons/ampeross/qetto-2/48/settings-icon.png" /></a>
            <div class="triangle"><span class="triangle-cover"></span></div>
        </li>

li.active{position:relative;}
li.active::after{
    content:"";
    background: transparent url("http://i41.tinypic.com/29ofuoh.png") no-repeat center center;
    background-size: 15px 17px;
    height:17px;
    width:100%;
    position:absolute;
    top:43px;
    left:0;
}

.box{
    height: 40px;
    width: 200px;
    position: relative;
    box-shadow: 3px 3px 3px #888;
    background: #f4f4f4;
}

.box::after{
    display: block;
    content: " ";
    width: 15px;
    height: 15px;
    background: #fff;
    box-shadow: inset 10px 10px 3px -7px #888;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    bottom: -8px;
    right: 50px;
}