border-color's transparent property

Question

I've found this cool example of border-color's transparent property usage to make an arrow.
I understand how borders are drawn and how an empty element with one side set border can help achieve arrow effect, but what makes me wander in this example is usage of transparent.
Take a look at this 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;
}

With this code I get an arrow pointing down. (JSFIDDLE)

With only one transparent I get an hourglass effect. (JSFIDDLE):

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

What confuses me is not knowing what border-{side} transparent refers to in this shorthand properties.

Hope that makes sense.
Any help appreciated.

Thanks ;)

Answer 1

there is a simple rule for the order in which the sides appear in such shorthand notations:

TRouBLe: Top Right Bottom Left

if you have less than 4 arguments, the missing ones are filled with the following rules (depending on how many arguments are present or missing):

3 values present: left = right
2 values present: left = right & bottom = top
1 value present:  left = right = bottom = top

so in your example

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

according to the rules, we have

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

similar in the other example:

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

we get the following

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

Answer 2

What you need to know is border-color:red black blue; will make the top border red, the bottom one blue and the left and right ones black, and that explains why you get an arrow in your first example:

• Top colored
• everything else transparent

It also explains the 2nd example:

• Top & bottom colored
• left & right transparent

Example

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

For a details explanation of the CSS triangle effect, see: How does this CSS triangle shape work?