CSS triangle_html/css_WEB-ITnose

Upper triangle ▲

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: transparent transparent #000 transparent;

Lower triangle?

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: #000 transparent transparent transparent;

Left triangle

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed solid dashed dashed;7 border-color: transparent #000 transparent transparent;

Right triangle

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed dashed dashed solid;7 border-color: transparent transparent transparent #000 ;

If you need to position the triangle, add it yourself position

The size of the triangle changes border-width, and the color changes the color value in border-color.

It has been tested in IE6/7/8 and Firefox and has no compatibility issues. It should be noted that the transparent attribute in border-color is not supported in IE6, that is, it will be displayed around the triangle. To white, there are two solutions:

1. If the background of the triangle is a single color, change the transparent in border-color to the corresponding color value

2. If the background of the triangle It is not monochrome. You need to change the CSS in IE6 to support transparency. There are many methods on the Internet. I personally support using JS??DD_belatedPNG, which will be introduced in a blog post later.