proprietà transparent border-color

Question

Ho trovato questo bellissimo esempio dello di proprietà transparent per creare una freccia.
Capisco come vengono disegnati i bordi e come un elemento vuoto con un bordo laterale impostato può aiutare a ottenere l'effetto freccia, ma ciò che mi fa vagare in questo esempio è l'uso di trasparente.
Date un'occhiata a questo semplice codice:

<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 questo codice ottengo una freccia rivolta verso il basso. (JSFIDDLE)

Con un solo trasparente ottengo un effetto hourglass. (JSFIDDLE):

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

Ciò che mi confonde, non è sapere cosa border-{side}transparent si riferisce alla presente proprietà abbreviate.

Spero che abbia senso.
Qualsiasi aiuto apprezzato.

Grazie;)

Answer 1

c'è una regola semplice per l'ordine in cui i lati compaiono in tali notazioni abbreviate: guai: In alto a destra in basso a sinistra

se si dispone di meno di 4 argomenti, quelli mancanti vengono riempiti con le seguenti regole (a seconda di come molti argomenti sono mancanti):

left = right 
bottom = top 
right = top 

così nel tuo esempio

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

ac cordoncino alle regole, abbiamo

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

simile in un altro esempio:

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

otteniamo la seguente

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

Answer 2

Quello che dovete sapere è border-color:red black blue; farà la rossa bordo superiore, in basso uno blu e sinistra e quelli di destra nera, e questo spiega il motivo per cui si ottiene una freccia nel vostro primo esempio:

• Top colorato
• tutto il resto trasparente

Ciò spiega anche il 2 ° esempio:

• Top & fondo colorato
• sinistra & destra trasparente

Esempio

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

Per dettagli spiegazione dell'effetto triangolo CSS, vedi: How does this CSS triangle shape work?

Answer 3

che si riferisce lo stile del bordo.Guarda le specifiche da w3c

Answer 4

tuo

primo esempio

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

Definire

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

controllo questo esempio http://jsfiddle.net/hDpnw/8/

&

tua

secondo esempio

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

Definire

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

controllo questo esempio http://jsfiddle.net/hDpnw/7/