34

I have seen the following example:

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

However I cannot understand how it creates arrows. Can someone explain this for me?

user1118321
  • 25,567
  • 4
  • 55
  • 86
  • 6
    Since the image has no size (width/height), what you're seeing is the border only...Border is 4px wide, and can be divided into 4 parts (aka triangles)...top, bottom, left, right – jlewkovich Aug 27 '13 at 03:14
  • Somewhat hard to explain, but there are borders on all 4 sides, and overlapping each other. Picture a square with an X through..each "slice" is a border..the side (transparent) borders overlap the black border on the top or bottom, and thus give the appearance of an arrow. Hopefully that helps explain a little bit. Let me know if you need clarification – Sean Thompson Aug 27 '13 at 03:17
  • 2
    hum.... I modified your fiddle, in this fiddle, I think you can see it clearly. http://jsfiddle.net/FrsGR/193/ – Bigxiang Aug 27 '13 at 03:20
  • @JL Write it as an answer. – Shomz Aug 27 '13 at 03:20
  • It's already been answered, but here's an animated version: http://jsfiddle.net/xq8Ce/ – thgaskell Aug 27 '13 at 04:17

3 Answers3

29

I didn't know this trick before, but I think I understand it. The bottom border isn't square, it's beveled on the sides. A left border would be beveled on the top and bottom. This is so borders of different colors meet cleanly. Because the arrow element has 0 height and width, the border segment is as wide on the bottom as you specify in the border rule, but narrows to a width of 0px (the size of the container).

You can play with the effect by setting different border thicknesses or changing the "side" of the border rule. The "arrow" always points opposite of the direction set in the rule. The bottom border "points" up; a right border "points" left.

Here's a quick diagram:

enter image description here

Left is the arrow trick. Right is a more typical border where the container has some dimensions.

Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61
4

Take a box. Say it's 5 pixels high and 5 pixels wide. Now say it has a 4px border. Here's what you should envision: http://jsfiddle.net/FrsGR/190. 

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

Now imagine that the box doesn't have a width or height, so you are just left with the borders: http://jsfiddle.net/FrsGR/885/.

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

They now overlap one another, and this is where the magic happens with creating arrows. The overlap line is drawn diagonally from each corner to the center. So, the end result is transparent triangles on the top, left, and right, with a black triangle on the bottom. Hope that helped!

Great reference: How do CSS triangles work?

Community
  • 1
  • 1
Anthony
  • 321
  • 1
  • 6
0

CSS is creating a border around a point (with no width/height but some x,y coordinate) with dimension of 4px as specified in .arrow. This is like creating a circle with radius of 4px, except due to the nature of CSS's borders, the "circle" is actually a square.

You can see all four quandrants of the 4px radius square this way:

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

Here's a zoomed in example using a size of 40px instead of 4px:

http://jsfiddle.net/dqB32/1/

DrewP84
  • 383
  • 3
  • 16