上三角▲
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，以后会在博文中介绍的。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
172
