A forward arrow -- create a triangle arrow with css

Generally, the triangle we make is usually a graph, and two images are required, because the pull-down menu is generally used, and a hover style is required. The Arrow is reversed. Is there a better solution? After all, it is a waste of resources to use two images to solve such a small problem. Therefore, I will use the following method to solve this problem, only one attribute of css is used, that is, border-width.

Let's first look at a style. What if we set the element border:

Test

It seems that I can't see anything. Let me add different colors to the four borders. Let's take a look:

Test

Did you find something? Right. Let's remove the text in the middle:

 

In this way, there will be four triangles. If we need the triangle at the top, we only need to set left, right, and bottom of border to the background color:

 

In this way, the triangle we need appears, and four different directions can be set:

       

The style code is very simple, just a few words:

<strong style="float:left; border-style:solid; border-width:10px; border-color:#000 #ccc #ccc #ccc; height:0; width:0; font-size:0"></strong>

Something is very simple, but it is a bit clever to use a border to create a triangle arrow.

Related reading: CSS3 @ font-face achieves a triangular effect with controllable color size

Farewell image-compatibility with characters for Corner tip effect beta

PS: Because the demo in the garden cannot contain empty labels, that is, I must add spaces to the <strong> </strong> label, for example, <strong> & nbspl; </strong>, but this leads to an error in IE6. You can try it.