您现在的位置是：网站首页> 编程资料编程资料

Css绘制箭头实现代码详解CSS3 用border写 空心三角箭头 (两种写法)CSS怎么去掉select的下拉箭头样式 纯CSS绘制三角形箭头图案技术解析CSS制作箭头图标代码(圆，三角形，椭圆) CSS三角箭头应用实践仿新浪微博箭头的css写法纯CSS绘制三角形箭头效果纯CSS实现箭头、气泡让提示功能具有三角形图标CSS模拟小箭头的实现代码使用css实现任意大小、任意方向和任意角度的箭头示例

2021-08-29 2342人已围观

简介 之前做箭头一直都是用图片，也尝试过用新浪微博用的那种特殊符号“◆”，不过宽高，三角形的大小等都不太好控制，后来发现可以直接用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;

上一篇：背景半透明最佳实践背景半透明效果CSS链接样式代码img 半透明 处理img加半透明背景实现思路及代码css 半透明 让IE6支持png图片半透明解决方法PNG8格式图片是不支持半透明等问题深入分析div背景半透明，覆盖整个可视区域的遮罩层效果 css 背景半透明最佳实践div背景半透明 覆盖整个可视区域的遮罩层效果利用js+css简单实现半透明遮罩弹窗DIV半透明代码 兼容主流浏览器CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]

下一篇：CSS quiz 带边 border 的三角形详解CSS3 用border写 空心三角箭头 (两种写法)CSS中使用border来创建三角形的基本方法讲解CSS绘制三角形的实现代码(border法)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网