css triangle icon compatible with various browsers_html/css_WEB-ITnose

CSS triangle icon compatible with various browsers

On currently popular websites, we often see some small triangle drop-down prompts (drop-down menu at the top of Weibo) , a simple way can be to use a picture instead, but with the development of front-end technology and developers' "nitpicking" about front-end performance, more and more front-end developers are beginning to "return to their original nature" in scenarios where pictures can not be used. To reduce the use of images, another advantage of CSS icons over images is that we can easily customize the size and color of the icons.

Implementing triangle icons with css is not a new technology. There have been many related technical articles before. This article mainly analyzes the problems encountered when using it in actual scenarios and how to avoid these problems.
The basic principles are similar. Here we mainly introduce the use of css border (of course, you can also use the rotation technology of css3, which will not be covered here due to compatibility issues).

css border implementation

The border of a div or element is not a line with height in our intuitive sense, but a equal-height trapezoid or triangle (when the width and height are 0), You can take a 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 the border in each direction is a triangle, so we only need to set the borders in the corresponding directions to be transparent or hide them to get a triangle in any direction. If we want to get a drop-down icon, we can change the left and right borders of the border to transparent. The css changes are as follows:

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

Take another look at the effect:

Note: The transparent attribute is used to set the background-color option in the background to the background color transparent

bingo! This is the effect we want, but it is a mess under ie6!

The long black frame makes it difficult for people to look directly at it. This is because IE6 does not support the transparent attribute. At this time, we can set the border style of the corresponding area to dashed. Dashed has a large border width. will be hidden. The css is modified 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 under ie6):

However, it is not over yet, we set a shadow to see the final result Effect:

Even if we see that a triangle we need has been generated, the occupied height of the triangle is still the original height, which will cause the effect of moving up when used with other elements. At this time, we need to set the height of the lower border to 0:

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

Let’s take a look at the effect:

still seems not very friendly when used. We still need to modify the corresponding color. Can we display the corresponding color according to the color set by the parent element? We need to modify the border-color:

.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; }

Effect (using the current font color):

Of course, in addition to using css border generation, we You can also use the special character ◇ to generate overlay positioning, or you can use CSS3 rotation to generate it (hack processing is required under IE6). Using borders is a common and simple and compatible way