CSS的小三角

上三角▲

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;

 

下三角▼

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;

左三角

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;

右三角

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 ;

三角若須要定位本身添加position

三角的大小更改border-width，顏色更改border-color中的顏色值。

 

 已在IE6/7/8和火狐中測試沒有兼容問題，須要注意的是在IE6中不支持border-color裏的transparent透明屬性，即三角周圍會顯示成白色，解決方法有兩種：

1、若是三角的背景是單色，把border-color裏的transparent改爲對應的顏色值

2、若是三角的背景不是單色，須要IE6裏的CSS改爲支持透明，網上有不少種方法，我的支持使用JS——DD_belatedPNG，之後會在博文中介紹的。

 

一樣的原理可使用CSS製做不規則的三角形，例如：

width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 50px solid transparent;
border-left: 20px solid transparent;
border-bottom: 10px solid #fcc458;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);

修改border四個方位的像素值，即爲修改三角形的三邊長，經過transform能夠調整三角形的傾斜角度，固然transform是CSS3，只有IE9以上才支持。

經過這種方法，對話框的不一樣箭頭形式就均可以經過CSS來完成，而再也不須要小三角圖片了。