Css绘制箭头实现代码

当前位置 : 首页 > 网页制作 > CSS > Css绘制箭头实现代码

Css绘制箭头实现代码

来源: 作者: 时间:2015-11-18 11:58
之前做箭头一直都是用图片,也尝试过用新浪微博用的那种特殊符号“◆”,不过宽高,三角形的大小等都不太好控制,后来发现可以直接用css绘制,非css3,使用常规的border进行绘制,
之前做箭头一直都是用图片,也尝试过用新浪微博用的那种特殊符号“◆”,不过宽高,三角形的大小等都不太好控制,后来发现可以直接用css绘制,非css3,使用常规的border进行绘制,即使在IE6下也可以完美实现

具体的做法是对一个矩形,设置border,并将width和height设置为0,即可模拟出箭头形状(三角形)。 如下图所示绘制了一个矩形,并将矩形的width和height设置为0,border设置为100px:

相关CSS:

复制代码
代码如下:

border-left:100px solid #F00;
border-right:100px solid #F00;
border-top:100px solid #00F;
border-bottom:100px solid #00F;
width:0;
height:0;

上面的其实就是四个矩形,分别是上下左右四个方向,如果我们想要某一个方向的矩形,就可以将它相邻两侧的border-color设置为transparent,对侧不设置border

第一个箭头的CSS,其余的类似:

复制代码
代码如下:

border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #00F;
width:0;
height:0;

下面是一个箭头的Demo:
PS: 2012-6-1
IE6不支持transparent,因此上面的代码在IE6加一点处理透明的hack,修改后的代码如下

复制代码
代码如下:

border-left:100px solid transparent; border-right:100px solid transparent; _border-left:100px solid black; _filter:chroma(color=black); _border-right:100px solid black; _filter:chroma(color=black); border-bottom:100px solid #00F; width:0; height:0;

Tag:

相关文章

网友评论

<