Css is compatible with triangle icons in various browsers, and css is compatible with triangles.

Css is compatible with triangle icons in various browsers, and css is compatible with triangles.

Css is compatible with triangle icons in various browsers

On popular websites, we often see some drop-down tips for small triangles (the drop-down menu at the top of Weibo), which can be replaced by an image in a simple way, however, with the development of front-end technologies and developers' "nitpicking" on front-end performance, more and more front-end developers begin to "Back to the truth" and reduce image usage in scenarios where images are not used, css icons have an advantage over images in that we can easily customize the Icon size and color.

Css triangle icons are no longer a new technology. There have been many related technical articles. This article mainly analyzes the problems encountered in actual scenarios and how to avoid these problems.
The basic principle is similar. Here we mainly introduce the use of css border (of course, we can also use the Rotation Technology of css3, Which is not involved due to compatibility issues ).

Css border implementation

A div or elementborderIt is not a line with a height in our intuitive sense, but a high-profile trapezoid or triangle (when the width and height are 0). Let's 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:

We can see that the border in each direction is a triangle, so we only need to set the border in the other direction of the corresponding direction to transparent or hidden to get a triangle in any direction. If we want to get a drop-down icon, we can change the left and right sides of the border and the bottom 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;}

Let's look at the effect:

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

Bingo! This is what we want, but we have a bird in ie6!

This is because ie6 does not support the long black box.transparentTransparent attribute. At this time, we can set the border style of the corresponding areadashed,dashedWhen the Border width is large, it is hidden. The css modification is 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 in ie6 ):

However, it is still not over. We can set a shadow to view the final effect:

Even if we see that we have generated a triangle we need, the height occupied by the triangle is still the original height, which results in the upward shift effect when used with other elements. At this point, we need to set the height of the Bottom Frame 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:

It seems that it is still unfriendly. We still need to modify the corresponding color during use. Can we display the corresponding color based on the color set by the parent element? We needborder-colorModify:

.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 (use the current font color ):

Of course, in addition to generating with css border, we can also use special characters ◇ superimposed positioning to generate, or use css 3 rotation to generate (hack is required for ie6 ). Border is a common and simple method of compatibility.

Address: http://www.45fan.com/dnjc/12998.html