.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. iOS开发中，修改ASIHTTPRequest源码，禁止在POST时URL编码

    通过ASIHTTPRequest库进行POST时,会对POST的文本内容进行encodeURL,而且ASIHTTPRequest自身并没有配置项可以关闭这个转换. 本文提供一个方法关闭encodeUR ...

  2. Spring入门第二十四课

    Spring对JDBC的支持 直接看代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql ...

  3. lsnrctl start错误Linux Error: 29: Illegal seek （翻译：非法谋取）

    现在,想不起来为什么ORACLE的监听,怎么就突然无法起来了呢. 好吧,问题反正就是发生了. lsnrctl start 遇到如下错误, LSNRCTL for Linux: Version 10.2 ...

  4. hdu1052

    #include <iostream>#include<algorithm>#include<queue>#include<stack>#include ...

  5. The instance of entity type 'xxxx' cannot be tracked because another instance with the same key value for {'Id'} is already being tracked.

    一.问题描述 问题:The instance of entity type 'xxxx' cannot be tracked because another instance with the sam ...

  6. CentOS6.5添加rbd模块

    [root@ceph-monitor opt]# modprobe rbd   FATAL: Module rbd not found. Once you have deployed the almi ...

  7. [Emacs] Emacs使用介绍

    详细,可参考该文档(转载):Emacs 快速指南 - 原生中文手册 C-x C-c 关闭Emacs会话 C-v/M-v 向前/后翻页 C-n/C-p 光标向下/上移一行 C-f/C-b 光标向前/后移 ...

  8. C#报算术运算导致溢出的错误

    如果是在fill datatable时报这个错,是因为所查询的数据中有在数据库中为NUMBER类型的字段,这种类型C#中不能识别,需TO_CHAR转换成字符型,就不会再报这个错了. e.g. SELE ...

  9. 大融合——LCT维护子树信息

    题目 [题目描述] 小强要在 $N$ 个孤立的星球上建立起一套通信系统.这套通信系统就是连接 $N$ 个点的一个树.这个树的边是一条一条添加上去的.在某个时刻,一条边的负载就是它所在的当前能够联通的树 ...

  10. POJ2488 A Knight's Journey

    题目:http://poj.org/problem?id=2488 题目大意:可以从任意点开始,只要能走完棋盘所有点,并要求字典序最小,不可能的话就impossible: 思路:dfs+回溯,因为字典 ...