html向下三⾓箭头,CSS制作三⾓箭头（兼容IE6）
之前介绍过《纯CSS实现⽆图⽚带箭头的DIV⽅框》
这次介绍下CSS制作三⾓箭头
通常，我们做上图那个三⾓形，⼀般都是做张图，⽽且需要两张，因为⼀般都是下拉菜单的效果，需要有个hover的样式，箭头是反的。那是不是有更好的办法呢，毕竟要⽤两张图⽚来解决这么⼀个⼩问题太浪费资源了，于是，下⾯我要⽤纯CSS的⽅法来解决这⼀问题，⽤到的只需css的⼀个属性，就是border-width
我们先来看个样式，如果设置元素边框，会怎么样：
test
似乎看不出什么，让我给四个边框加上不同的颜⾊吧再看看吧：
test
是不是发现了些什么？对，让我们把中间的⽂字去掉吧：
这样，就出现4个三⾓形了，然后我们如果需要顶部那个三⾓形，只需要将border的left、right、bottom设置成背景⾊就⾏了：
这样，我们需要的三⾓形就出现了，并且可以设置4个不同⽅向的了：
样式代码很简单，就⼏句话：
htmlborderfloat: left;
border-style: solid; border-width: 10px;
border-color: #000 #ccc #ccc #ccc;
height: 0;
width: 0;
font-size: 0;
实际应⽤
⽐如我们要使⽤向下的箭头(兼容IE6写法)
HTML代码：
CSS代码：
.demo{position:relative}
.bottom-arrow{
position:absolute;
top:10px;
left:0px;
border-style:solid;
border-width:100px;
border-color:#000000 transparent transparent transparent;/*上边框设置想要的颜⾊*/
height:0;
width:0;
font-size:0;
_border-color:#000000 tomato tomato tomato ; /*边框透明⾊ For IE6-*/
_filter:chroma(color=tomato);/*边框透明⾊ For IE6-*/
}
说明：
这⾥的演⽰是⽤了边框透明⾊，如果你⽤不到透明的话，直接设置border-color为你需要的颜⾊就可以了，免去为了兼容IE6的透明边框滤镜写法
Chroma属性可以设置⼀个对象中指定的颜⾊为透明⾊，它的表达式如下：
Filter：Chroma(color=color)
这个属性的表达式是不是很简单，它只有⼀个参数。只需把您想要指定透明的颜⾊⽤Color参数设置出来就可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。