CSS的小三角_html/css_WEB-ITnose
程序员文章站
2022-06-09 14:30:02
...
上三角▲
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,以后会在博文中介绍的。
推荐阅读
-
详解HTML5将footer置于页面最底部的方法(CSS+JS)
-
Zen Coding 快速编写HTML/CSS代码的实现
-
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
-
35款精致的 CSS3 和 HTML5 网页模板 推荐
-
分享36道前端html+css的面试题
-
html5+css如何实现中间大两头小的轮播效果
-
有关html的标签以及css属性(border、div)
-
【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
-
低版本IE正常运行HTML5+CSS3网站的3种解决方案
-
打造属于自己的 HTML/CSS/JavaScript 实时编辑器