CSS triangle implementation and application examples_html/css_WEB-ITnose

css实现三角形，网上讲了很多，但我发现一般都是三角向上或者向下的，向左向右这两方向似乎讲得很少，本人试了一下，发现原来在IE下很难搞~~(万恶的IE)...
css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧：
            .triangle {               
                border-color: red green blue pink;
                border-style: solid;
                border-width: 20px 20px 20px 20px;
                width: 0;
                height: 0;
            }

   

So, what will we find when we only leave a border? ?

.triangle {
border-color: red transparent transparent;
border-style: solid;
border-wi dth: 20px 20px 0px 20px;
      width: 0;
Height: 0;
}

How? Come out~~

For the same reason, we change it to left to right,

To the left: .triangle { .triangle {                                    transparent transparent;
border-style: solid;
border-width: 20px 20px 20px 0px;
width: 0;
height: 0;
}

To the right ： .triangle {                                                                                                                                                                                                                                                       ,,,, 20px;

width: 0;
height: 0 ;
           }

Great work! ? Hey, what browser are you using? If you are using a non-IE6 version, congratulations! Below we use IE6 (gnashing teeth...),

Khan~~~~

It turns out that IE6 gives the background black by default~ ~

The only thing that is easy to use is the IE-specific stuff. To unblock the bell, you need the person who tied the bell (~_~)

First of all, css hack, use the underscore "_"!

_border-top-color: white;

_border-bottom-color: white;

Then use chroma filter: _filter: chroma( color =white);

In fact, it is Filter out the unwanted edges!

Also add font-size: 0; line-height: 0;

This will completely remove the black background:

            .triangle {
                border-color: transparent  transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                font-size: 0;
                line-height: 0;    
                width: 0;
                height: 0;
                _border-top-color: white;
                _border-bottom-color: white;
                _filter: chroma( color =white);
            }

html css:

Js代码  

& lt; Title & gt; CSS triangle & lt;/title & gt;
& lt; style & gt;
.tiparrow {
/*right color, other transparent transparent */
border-color: transparent #e00 transparent transparent;
border-style: solid;
border- width: 6px 6px 6px 0px;
                  padding: 0;                                                             /* ie6 height fix */
font-size: 0;
line-height: 0;
/* ie6 transparent fix */
_border-top-color: #dddddd;
_border-bottom- color: #dddddd;
_filter: chroma(color = #dddddd);
19.                                                                     🎜>
I know some students want to see the effect directly, haha: watch
Download
The triangle is out, let’s look at an application example (combined with the fadeIn and fadeOut written before):
http://kingkit.com.cn/KUI/ Tip.html
Full package

Triangle3.rar