Use css to create triangles, compatible with IE6, and use & lt; div & gt; & lt; s & gt; & am

Css is used to create triangles, which are commonly used. It happened that the project was used in the past few days. I just copied the code from the Internet and used it directly. But I encountered some problems when I was using it today. So I would like to take this opportunity to study the css triangle.
Let's write a <div>, <s>, <span> tag respectively, and assign different colors to the top, bottom, and left border to see what it looks like:
Html:
[Html]
<Div class = "triangle"> </div>
<P>
<S class = "triangle"> </s>
<Span class = "triangle"> </span>
</P>
Css:
[Css]
. Triangle {
Width: 20px;
Height: 20px;
Border: 9px solid;
Border-color: blue red green yellow;
}
In chrome

In IE, the content area in the div triangle is smaller than that in chrome.

If we keep any side of the four direction border, set the color of the other three sides to transparent, and set height: 0, width: 0, in this way, we can get a triangle. First, we will keep the color of all edges to see what it looks like.

We found that div, a block-level element, can perfectly show four triangles under chrome, but IE can only show up and down triangles. Secondly, the inline element shows the same style in IE and chrome. Therefore, a problem may occur. During triangle writing, when we write the upper and lower triangles, block-level elements and inline elements can both display triangles under IE and chrome. However, if you follow this code to write a triangle in the left and right directions, it will be OK in chrome, but IE will show the shape below. This will cause problems. This problem also plagued me. At that time, I also thought, how can the same code come out of different triangles? The original direction is different, and the performance in IE is different. Now, let's turn the trapezoid into a triangle. You only need to add a piece of code: font-size: 0.
Modify the css Code as follows:
[Css]
. Triangle {
Height: 0;
Width: 0;
Border: 9px solid;
Border-color: blue red green yellow;
Font-size: 0;
}
Now we can be perfectly compatible with IE and chrome, and FF is also quite simple, haha.
Okay. Now let's set the color of the Three Borders to transparent! See if there will be any triangle. Let's take the triangle on the right as an example.
Modify the css Code as follows:
[Css]
. Triangle {
Height: 0;
Width: 0;
Border: 9px solid;
Border-color: transparent red transparent;
Font-size: 0;
}
In the end, both IE7/8/9 and chrome are OK, but the Default background color is black instead of transparent in IE6 ,:

IE6 is so ugly, of course you have to solve it. You can use the following method:
1. css hack
For the hack of IE6, set the top, left, and bottom border to white, but this condition only applies when the background color is white.
Corresponding css code:
[Css]
. Triangle {
Height: 0;
Width: 0;
Border: 9px solid;
Border-color: transparent red transparent;
Font-size: 0;
_ Border-top-color: white;
_ Border-left-color: white;
_ Border-bottom-color: white;
}
2. border-style
This method is better. Set the triangle border-style: solid to display one side, and the other three sides are border-style: dashed. In this way, the border of the dotted line style can form a natural blank without any pollution! Modify the css Code as follows:
[Css]
. Triangle {
Height: 0;
Width: 0;
Border-width: 9px;
Border-style: dashed solid dashed;
Border-color: transparent red transparent;
Font-size: 0;
}
In this way, IE6 is compatible!
If you want to construct a triangle similar to 1 px, you can add two triangles in the same direction, but the second triangle must be consistent with the color of your background color. In addition, the two triangles are best nested with each other, and the triangles inside are covered by triangles that are absolutely positioned on the external layer. This is better than placing two triangles at the same level. So where is it? If you need to change the triangle position, you only need to change the outer triangle position, and the middle triangle does not need to be operated because of relative positioning.
If you have any comments, please leave me a message!