How can I create an arrow using only CSS?

This question already has an answer here:

How do CSS triangles work? 18 answers

---

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:

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

---

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?

---

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/

链接地址: http://www.djcxy.com/p/89472.html

上一篇: 纯CSS星形

下一篇: 我怎样才能使用CSS创建一个箭头？