CSS triangle implementation and application examples_html/css

CSS triangle implementation and application examples_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:19

Original

1211 people have browsed it

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