Navbar con triángulos como Facebook

[SonrisaCs]

Buenas noches, primero que nada, pongo este th en ésta sección porque no sé si se llevaría a cabo con CSS o Jquery.

Quisiera saber cómo hacer un navbar como la de la biografia de facebook con triángulos en el bottom, creo que sería algo bastante simple, pero no tengo mucha idea de cómo hacerlo...

Osea lo que quiero es que la pestaña seleccionada en la web tenga el triángulo abajo, y cuando se cambie de pestaña se quite de la anterior y se ponga en la actual, me explico?

Una imagen dice más que mil palabras:

[memoadian]

podría ser un background, que tenga un background-position: bottom center.

eso lo añades a una clase por ejemplo

.active

y ya sea por lenguaje de servidor o javascript se lo aplicas al menu clickado.

[pzin]

Podrías usar un pseudo-elemento y crear un triángulo jugando con los bordes. Luego lo ajustas con un posicionamiento absoluto:

Código CSS:

li {
  position: relative;  
}
 
li:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #cfcfcf;
  content: '';
}
 

El resultado sería algo tal que: