纯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)的更多相关文章

  1. css实现三角箭头

    像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:0px 16px 20px 16px; border-style:sol ...

  2. 浮出层的css写法,完美兼容IE6~10

    利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: <div class="poptip"> <span cla ...

  3. 使用css写三角箭头

    .right-arrow{ width:6px; height:6px; align-self: center; border-right:1px solid #2ac795; border-left ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. CSS三角的写法(兼容IE6)

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  6. .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  8. 兼容IE6的页面底部固定层CSS代码

    有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下 ...

  9. CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

随机推荐

  1. linux系统登陆过程

    一.物理直连登陆过程 初始化进程init 会根据直接连接的字符终端设备,打开getty程序,并关联在字符终端设备上tty1/2/3/4/5/6/7....上,在不同的终端设备上提示用户输入信息,等待终 ...

  2. S7-300 符号IO域的组态 HMI变量指针化的方法以及应用,在一个IO域显示多个温度值的办法

    应用工业场景 例如需要测试很多个节点的温度值的时候,需要监控的位置很多,如果HMI的画面很小, 可以使用符号IO域和变量的间接寻址 符号IO域接近于VB中的combo 控件 实现上图的界面 : 上图界 ...

  3. springcloud-alibaba手写负载均衡的坑,采用restTemplate,不能添加@loadbalanced注解,否则采用了robbin

    采用springcloud-alibaba整合rabbion使用DiscoveryClient调用restful时遇到的一个问题,报错如下: D:\javaDevlepTool\java1.8\jdk ...

  4. IDEA配置数据库连接失败的问题

    今天采用IDEA连接数据库失败了,有几个问题需要注意 首先笔者采用的数据库版本为8.0.17而IDEA自带版本是5.2.26大概,于是首先出现的问题是驱动不匹配,那么就需要换成我自己的版本,配置如下 ...

  5. 牛客NOIPtg day5 B-demo的gcd

    一句话题意:给定长度为n的序列,求任意两两之间gcd的积mod 998244353的值. 好像是莫比乌斯反演板子题???(反正noip估计不考这种毒瘤 考场上想到一个类似正解的思路 好像摊下来最多处理 ...

  6. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  7. Unity3d fbx纹理不显示 原因

    Unity3d 导入fbx文件后纹理不显示(3ds Max中显示正常) 原因: 1.纹理图片没有导入fbx同一文件夹中 2.纹理图片没有在fbx文件之前导入(现导入纹理图片,再导入fbx文件)

  8. STL访问Map问题,key为Integer或Long

    参考stackoverflows上的这篇文章 http://stackoverflow.com/questions/924451/jstl-access-a-map-value-by-key 换成 原 ...

  9. ssm框架前后端数据交互完整示例

    1.sprinMvc控制层 package com.dengfeng.house.controller; import java.text.ParseException; import java.ut ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...