border-color transparent de la propriété

J'ai trouvé ça cool exemple de border-color's transparent de la propriété d'usage de faire une flèche.
Je comprends comment les frontières sont dessinées et comment un élément vide avec un côté jeu de frontière peut aider à atteindre flèche en effet, mais ce qui me fait errer dans cet exemple est l'utilisation de transparents.
Jetez un oeil à ce simple code:

<div id="daniel"></div>

CSS:

#daniel{
 border-color: rgba(111,111,111,0.2) transparent transparent;
 border-style: solid;
 border-width: 15px;
 position: absolute;
}

Avec ce code j'obtiens une flèche pointant vers le bas. (JSFIDDLE)

Avec un seul transparent-je obtenir une hourglass effet. (JSFIDDLE):

border-color: rgba(111,111,111,0.2) transparent;

Ce qui me confond est de ne pas savoir ce que border-{side} transparent se réfère dans cette abréviation propriétés.

L'espoir qui fait sens.
Toute aide appréciée.

Merci 😉

OriginalL'auteur daniel.tosaba | 2012-02-03