Home  >  Article  >  Web Front-end  >  CSS triangle implementation and application examples_html/css_WEB-ITnose

CSS triangle implementation and application examples_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:191227browse

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代码  

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

Triangle3.rar

  • Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn