Demo
You can use the :before
and :after
pseudo elements to achieve this effect.
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution using links:
<nav>
<ul>
<li><a href="#" class="active">homepage</a></li>
<li><a href="#">option2</a></li>
<li><a href="#">option3</a></li>
</ul>
</nav>