Home > Article > Web Front-end > 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;
}
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代码
Triangle3.rar