propiedad transparente del color del borde

Question

He encontrado este buen ejemplo del uso de la propiedad border-colortransparent para hacer una flecha.
Entiendo cómo se dibujan los bordes y cómo un elemento vacío con un borde de lado puede ayudar a lograr el efecto de flecha, pero lo que me hace vagar en este ejemplo es el uso de transparente.
Tome un vistazo a este código simple:

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

CSS:

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

Con este código me sale una flecha que apunta hacia abajo. (JSFIDDLE)

Con solo una transparente obtienes un efecto hourglass. (JSFIDDLE):

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

Lo que me confunde es no saber lo que se refiere a border-{side}transparent en este propiedades abreviadas.

Espero que tenga sentido.
Cualquier ayuda apreciada.

Gracias;)

Answer 1

hay una regla simple para el orden en el que los lados aparecen en tales notaciones cortas: problemas: Superior derecha Inferior izquierda

si tiene menos de 4 argumentos, los que faltan se llena con las siguientes reglas (dependiendo del número de argumentos que faltan):

left = right 
bottom = top 
right = top 

por lo que en el ejemplo

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

ac cording a las reglas, tenemos

top=rgba 
right=transparent 
bottom=transparent 
left=right=transparent 

similar en el otro ejemplo:

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

obtenemos la siguiente

top=rgba 
right=transparent 
bottom=top=rgba 
left=right=transparent 

Answer 2

Lo que hay que saber es border-color:red black blue; hará que el rojo borde superior, la inferior azul y la izquierda y las correctas negro, y eso explica por qué se obtiene una flecha en su primer ejemplo:

• Top color
• todo lo demás transparente

también explica el segundo ejemplo:

• Top & base de color
• izquierda & derecha transparente

Ejemplo

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example": 
#example p { 
    border-color: red blue green; 
    border-style: solid; 
} 

Source

Para una explicación de detalles el efecto triángulo CSS, consulte: How does this CSS triangle shape work?

Answer 3

que se refiere al estilo de borde.Mira las especificaciones de w3c

Answer 4

Su

primer ejemplo

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

Definir

first rgba border= is a top border; 
second transparent border = are left & right border; 
third transparent border= are bottom border; 

cheque este ejemplo http://jsfiddle.net/hDpnw/8/

&

su

segundo ejemplo

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

Definir

rgba border= are top & bottom border; 
transparent border = are left & right border; 

cheque este ejemplo http://jsfiddle.net/hDpnw/7/