12

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 ;)

daniel.tosaba
  • 2,503
  • 9
  • 36
  • 47

4 Answers4

20

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
Sirko
  • 72,589
  • 19
  • 149
  • 183
  • I get it know, obvious. I thought that `rgba` refers to all sides and then with transparent afterwards you pick ones you wish _not to be there_. Thanks man, thanks everyone! – daniel.tosaba Feb 03 '12 at 07:52
  • This is a great answer, but if I am getting it right, the inferring order for the missing ones are: `right = top`, then `bottom = top`, then `left = right`. The order matters I guess, so maybe should edit the answer to re-order the lines in the first code snippet. BTW, the order in other snippets are in correct order though. – Eric Apr 14 '19 at 06:39
  • @EricWang The list was thought from end to start. So, if the last element is missing `left = right`, if the second to last is also missing `bottom = top`, etc. I'm not sure, if another ordering makes this clearer. – Sirko Apr 14 '19 at 10:04
  • @Sirko What I mean is before you can do `left = right`, should first check `right = top`, because if `right` is missing, that's the first thing to do. So, maybe just re-order the `left = right bottom = top right = top` part to `right = top bottom = top left = right` – Eric Apr 14 '19 at 10:52
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?

Community
  • 1
  • 1
Soufiane Hassou
  • 17,257
  • 2
  • 39
  • 75
0

That refers to the Border style. Look at the specifications from w3c

HardCode
  • 1,613
  • 4
  • 21
  • 42
0

Your

first example

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

Define

 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;

Define

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

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

sandeep
  • 91,313
  • 23
  • 137
  • 155