.nav {
background-color:rgba(0, 0, 0,.5);
}
.item {
display:inline-block; margin-left:100px;
position:relative; border-left: rgba(0,0,0,.8); border-right: rgba(0,0,0,.8);
padding:5px 30px; background-color:rgba(10,36,53,.1);
box-shadow: inset 0 10px 20px 2px rgba(10,36,53,.1),
inset 0px 0px 3px rgba(0,0,0,.1),
inset 0px 0px 3px rgba(0,0,0,.1);
}
.triangle {
border-top: 15px solid rgba(2,7,10,.55);
border-left: 15px solid transparent; border-right: 15px solid transparent;
position: absolute; bottom: -15px;
margin-left: -15px; left:50%;
}
<div class="nav">
<div class="item">
Hello World
<div class="triangle"></div>
</div>
</div>
