css实现三角箭头(兼容IE6)
纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activex的安全提示,基本不可行,第三种是用boder-style:dashed,这种方法效果比较完美,美中不足的是目测向下箭头比上简头差了一个象素,下简头需调整border-width减掉一个像素
效果:
代码:
<style>
.arrow{
border-style:solid;
border-width:10px;
border-color:transparent;/*上边框设置想要的颜色*/
height:0;
width:0;
font-size:0;
}
.up{
border-bottom-color:red;
_border-style:dashed dashed solid dashed;
}
.down{
border-top-color:red;
_border-style: solid dashed dashed dashed ;
}
</style> <div style="position:relative">
<span class="arrow up" style="top:0px;position:absolute;"></span>
<span class="arrow down" style="top:50px;position:absolute;"></span>
</div>
css实现三角箭头(兼容IE6)的更多相关文章
- css实现三角箭头
像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:0px 16px 20px 16px; border-style:sol ...
- 浮出层的css写法,完美兼容IE6~10
利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: <div class="poptip"> <span cla ...
- 使用css写三角箭头
.right-arrow{ width:6px; height:6px; align-self: center; border-right:1px solid #2ac795; border-left ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- 兼容IE6的页面底部固定层CSS代码
有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下 ...
- CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
随机推荐
- 查漏补缺之Go的Strings, bytes, runes和字符
字节遍历,字符遍历 https://play.golang.org/p/DeZcCN9aHXo package main import ( "fmt" "unicode/ ...
- iOS项目Info.plist中关键字汇总
1. Application does not run in background (键名:UIApplicationExistsOnSuspend) 自从iOS4.0之后,当你在应用程序执行的时候按 ...
- C#对象、List<>转DataTable
public static DataTable ObjectToTable(object obj) { try { Type t ...
- C#学习之time控件和timer_tick事件 -----转载
Timer控件:Timer控件只有绑定了Tick事件,和设置Enabled=True后才会自动计时,停止计时可以用Stop()控制,通过Stop()停止之后,如果想重新计时,可以用Start()方法来 ...
- Spring注解@ConfigurationPropertie
@ConfigurationPropertie作用 参考的博客 springboot中@ConfigurationProperties注解的工作原理 @ConfigurationProperties是 ...
- MySQL更新时间
Mysql时间加减函数为date_add().date_sub()定义和用法DATE_ADD() 函数向日期添加指定的时间间隔.DATE_SUB() 函数向日期减少指定的时间间隔.语法DATE_ADD ...
- 4.2 Scikit-Learn简介(机器学习篇)
目录 第四章 机器学习 4.1 机器学习简介 4.1.1 机器学习分类 4.2 Scikit-Learn简介 4.2.1 Scikit-Learn的数据表示 4.2.2 Scikit-Learn的评估 ...
- SpringBoot 静态资源的配置
springboot默认的静态资源目录: classpath:/static classpath:/public classpath:/resources classpath:/META-INF/re ...
- Hive的原生部署方式
一.Hive的部署 1.官方文档 https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2.前提条件 需要安装JDK1.7之上 ...
- SVG格式文件
SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensible Markup Language ...