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透明属性,即三角周围会显示成白色,解决方法有两种:

一、如果三角的背景是单色,把border-color里的transparent改成对应的颜色值

二、如果三角的背景不是单色,需要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来完成,而不再需要小三角图片了。

posted @ 2013-11-15 18:01  秋月白  阅读(574)  评论(2编辑  收藏  举报