Transparent border-color property

Question

I found this cool example of using the border-color transparent property to create an arrow.
I understand how borders are drawn and how an empty element with one boundary border can help achieve the effect of an arrow, but what makes me wander in this example is the use of transparency.
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 just one transparent, I get the hourglass effect. ( JSFIDDLE ):

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

What confuses me does not know what border-{side} transparent means in these shorthand properties.

Hope this makes sense.
Any help appreciated.

Thanks;)

Answer 1

There is a simple rule for the order in which the parties appear in such abbreviations:

TRouBLe: top right bottom left

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

 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 

similarly in another 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 border-color:red black blue; will make the upper border red, the lower blue and the left and right black, and this explains why in the first example you get an arrow:

• Top color
• everything else is transparent

This also explains the second example:

• Top and bottom color
• left and 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; } 

A source

Detailed explanation of the CSS triangle effect: How does this CSS triangle shape work?

Answer 3

This refers to the border style. Look at the specifications of w3c

Answer 4

Your

first example

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

Identify

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

check this example http://jsfiddle.net/hDpnw/8/

&

your

second example

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

Identify

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

check this example http://jsfiddle.net/hDpnw/7/