.right-arrow{

    width:6px;

    height:6px;

    align-self: center;

    border-right:1px solid #2ac795;

    border-left:2px solid transparent;

    border-top:2px solid transparent;

    border-bottom:1px solid #2ac795;

    display:block;

    transform: rotateZ(-45deg);

}

以上为向右的箭头，如果箭头向左边，则需改变4个边框的宽度和旋转度数。

使用css写三角箭头的更多相关文章

  1. css实现三角箭头（兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  2. css实现三角箭头

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

  3. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  4. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  5. 三角箭头 css实现

    效果图: 1.html 代码 <div>较昨日 <span class="dot-up"></span> 20%</div> < ...

  6. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  7. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  8. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  9. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

随机推荐

  1. Web项目的导出和部署

    -----------------siwuxie095                                 Web 项目的导出     工程结构目录如下:                 ...

  2. win7下在eclipse3.7中使用hadoop1.2.1插件运行MadReduce例子

    环境 win7+hadoop_1.2.1+eclipse 3.7+maven 3 1.在win7下下载hadoop_1.2.1 2.安装hadoop的eclipse插件,注意eclipse 4.x版本 ...

  3. pig 入门教程（1）

    出处:http://www.codelast.com/ 本文可以让刚接触pig的人对一些基础概念有个初步的了解. 本文大概是互联网上第一篇公开发表的且涵盖大量实际例子的Apache Pig中文教程(由 ...

  4. 7、linux常见系统环境变量

    使用env命令显示所有环境变量 env  (常见的有HOSTNAME,SHELL,HISTSIZE,PERL5LIB,USER,PATH,PWD,LANG,HOME, LD_LIBRARY_PATH ...

  5. 2、perl模块查询安装否

    1.Perl 中每个包有一个单独的符号表,定义语法为:package mypack; 此语句定义一个名为 mypack 的包,在此后定义的所有变量和子程序的名字都存贮在该包关联的符号表中,直到遇到另一 ...

  6. 文件格式——Sam&bam文件

    Sam&bam文件 SAM是一种序列比对格式标准, 由sanger制定,是以TAB为分割符的文本格式.主要应用于测序序列mapping到基因组上的结果表示,当然也可以表示任意的多重比对结果.当 ...

  7. p3201&bzoj1483 梦幻布丁

    传送门(洛谷) 传送门(bzoj) 题目 N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色. 例如颜色分别为1,2,2,1的四个布丁一共有3段颜 ...

  8. 机器学习--PCA降维和Lasso算法

    1.PCA降维 降维有什么作用呢?数据在低维下更容易处理.更容易使用:相关特征,特别是重要特征更能在数据中明确的显示出来:如果只有两维或者三维的话,更便于可视化展示:去除数据噪声降低算法开销 常见的降 ...

  9. 【转】C# 使用正则表达式去掉字符串中的数字，或者去掉字符串中的非数字

    源地址:http://www.cnblogs.com/94cool/p/4332957.html

  10. 在Linux系统下远程连接oracle的防火墙设置

    在Linux系统要远程连接Oracle的防火墙设置方法: 打开5801至5810 端口用于vnc iptables -I INPUT -p tcp --dport 5801:5810 -j ACCEP ...