html向下三角箭头,CSS制作三角箭头（兼容IE6）

之前介绍过《纯CSS实现无图片带箭头的DIV方框》

这次介绍下CSS制作三角箭头

通常，我们做上图那个三角形，一般都是做张图，而且需要两张，因为一般都是下拉菜单的效果，需要有个hover的样式，箭头是反的。那是不是有更好的办法呢，毕竟要用两张图片来解决这么一个小问题太浪费资源了，于是，下面我要用纯CSS的方法来解决这一问题，用到的只需css的一个属性，就是border-width

我们先来看个样式，如果设置元素边框，会怎么样：

test

似乎看不出什么，让我给四个边框加上不同的颜色吧再看看吧：

test

是不是发现了些什么？对，让我们把中间的文字去掉吧：

这样，就出现4个三角形了，然后我们如果需要顶部那个三角形，只需要将border的left、right、bottom设置成背景色就行了：

这样，我们需要的三角形就出现了，并且可以设置4个不同方向的了：

样式代码很简单，就几句话：

float: 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参数设置出来就可以了。

html向下三角箭头,CSS制作三角箭头（兼容IE6）相关推荐

html中三角向下符号,使用css实现三角符号效果
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
css竖向箭头符号_用css制作空心箭头(上下左右各个方向均有)
css制作空心的上下左右的箭头 *{padding:0;margin:0; }.box{width:100px;height:500px;margin:0 auto;border:1px solid ...
css实现透明度（兼容IE6、火狐等）
具体代码: filter:alpha(opacity=50); //兼容ie opacity:0.5; //其他浏览器若此层内的图片等不能实现透明度,只需要在此元素的上层元素(即父元素)设置 ...
css响应式布局兼容ie6
1.两栏布局左侧定宽右侧自适应 <div class="grid1"><div class="left_1">左侧定宽< ...
使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css border制作小三角形状及应用（兼容IE6）
原理 css盒模型一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
纯css制作带三角(兼容所有浏览器)
如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
css 科技边框_纯css制作带三角的边框(附效果图)
首先附上效果图: 以上的效果完全是用 css 来实现的,那么是怎么实现的呢? 我们知道 html 中有一些特殊的字符,具体的请点击 HTML特殊字符大全. 通过特殊字符,利用 css 中的 margi ...

html向下三角箭头,CSS制作三角箭头（兼容IE6）

html向下三角箭头,CSS制作三角箭头（兼容IE6）相关推荐

最新文章

热门文章