CSS: "Indentation" in border below active menu item - css

Question

I've got a simple Bootstrap navbar menu, which works great, but I want to add a little visual indicator to the bottom of the menu div to show which menu item is currently active.
This seems like it should be easy, but particularly notice that the drop shadow needs to move with the indentation - how do we do something like this?
A picture is worth a thousand words, added one below.
EDIT Added Fiddle: http://jsfiddle.net/52VtD/1463/
HTML
<div class="navbar navbar-gradient navbar-static-top">
<div class="container">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav nav-pills">
<li class="active">
<span class="glyphicon glyphicon-home" />
</li>
<li>
<span class="glyphicon glyphicon-cog" />
</li>
</ul>
</div>
</div>
</div>
CSS
#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;
}

Answer 1

Here is a solution with a .png image :
FIDDLE
I added this to you css:
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;
}

Answer 2

You could use something like the following. At least if you don't want to use images and don't mind CSS transforms (Other options may include using an image, drawing the thing with CSS backgrounds or SVG maybe.)
demo
.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;
}

Answer 3

Probably needs a little more tweaking but here is a 100% CSS solution.
FIDDLE HERE
#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;
}
and in each li that you want active (and you might have to use a little JS to insert these elements into the DOM of the li is active...)
<li class="active"><img src="http://icons.iconarchive.com/icons/ampeross/qetto-2/48/settings-icon.png" />
<div class="triangle"><span class="triangle-cover"></span></div>
</li>