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?

5
  • 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, 2013 at 3: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 Aug 27, 2013 at 3:17
  • 2
    hum.... I modified your fiddle, in this fiddle, I think you can see it clearly. jsfiddle.net/FrsGR/193
    – Bigxiang
    Aug 27, 2013 at 3:20
  • @JL Write it as an answer.
    – Shomz
    Aug 27, 2013 at 3:20
  • It's already been answered, but here's an animated version: jsfiddle.net/xq8Ce
    – thgaskell
    Aug 27, 2013 at 4:17

3 Answers 3

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.

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?

1
  • 1
    That's a very good reference. Glad to see I understand how this works :) Aug 27, 2013 at 3:33
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/