Using CSS to implement a fully compatible browser triangle _ Basics Tutorial

On the current popular web site, we often see small triangular drop-down prompts (the dropdown menu at the top of the microblog) and a simple way to use a picture instead, but with the development of front-end technology and the "nit-picking" of developers for front-end performance, more and more front-end developers are beginning to "Go to basics" To reduce the use of pictures in scenes that do not use pictures, the CSS icon has an advantage over the picture that we can easily customize the size and color of the icons.

CSS implementation of the triangle icon is not a new technology, there are many related technical articles, this article is mainly to analyze the actual situation in the use of the problems encountered and how to avoid these problems.
The basic principle is similar, here mainly introduces the use of CSS border (of course, can also use CSS3 rotation technology, due to the compatibility problem is not covered here).

CSS Border Implementation

A div or element is border not our intuitive sense of a high line, but a tall trapezoid or triangle (width height of 0 o'clock), you can look at the effect:
Div definition:

<div class= "Arrow1" ></div>

Css:

. arrow1{
  width:0px;
  height:0px;
  border-width:30px;
  Border-style:solid;
  Border-color: #007998 #47A447 #3C6AB9 #D2322D;
}

Final effect:

You can see that each direction of the border is a triangle, then we only need to the corresponding direction of the rest of the other direction of the border set to transparent or hidden can get a triangle in any direction. If we want a drop-down icon, we can change the left and right border of the border to be transparent, and the CSS changes are as follows:

. arrow1{
  width:0px;
  height:0px;
  border-width:30px;
  Border-style:solid;
  Border-color: #007998 transparent transparent transparent;
}

And look at the effect:

Note: The Transparent property is used to set the Background-color option to the background color transparency in background

Bingo! is the effect we want, but in IE6 the next Cup bird!

Long Big black box, people can not look directly, this is because the IE6 does not support transparent transparent properties, at this time we can set the corresponding area of the border style, when the dashed dashed border width is very large, will be hidden away. CSS modifications are as follows:

  . arrow1{
    width:0px;
    height:0px;
    border-width:30px;
    Border-style:solid;
    Border-color: #007998 transparent transparent transparent;
  }

The effect is as follows (view IE6):

But it's not over yet, so let's set a shadow to see the effect of the final build:

Even if what we see has generated a triangle that we need, the height of the triangle is still the same height, which can cause the effect of the move up when used with other elements. At this point, we need to set the height of the bottom border to 0:

  . arrow1{
    width:0px;
    height:0px;
    border-width:30px 30px 0;
    Border-style:solid;
    Border-color: #007998 transparent transparent transparent;
  }

And look at the effect:

Still seems to be not very friendly, in use we still need to modify the corresponding color, can be based on the parent element set color, display the corresponding color? We need to border-color change the following:

. arrow1{
  width:0px;
  height:0px;
  line-height:0px;
  border-width:30px 30px 0;
  Border-style:solid dashed dashed dashed;
  border-left-color:transparent;
  border-right-color:transparent;
}

Effects (using current font color):

Of course, in addition to the use of CSS border generation, we can also use special characters ◇ overlay positioning to generate, can also use CSS3 rotation to generate (IE6 under the need hack processing). The use of border is a common and simple and compatible way