.toTop{
width: 2.5rem;
height: 2.5rem;
background-color: rgba(228,228,228,.6);
position: fixed;
bottom: 5rem;
text-align: center;
line-height: 2.5rem;
right: 2rem;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
i{
width: 2rem;
height: 2rem;
position: relative;
&:after{
content: "";
width: 35%;
height: 35%;
display: inline-block;
border-top: .1rem solid #333;
border-left: .1rem solid #333;
overflow: hidden;
margin: .6rem 1rem;
transform: rotate(45deg);
transform-origin: 0 0;
}
}
}
<div class="toTop"> <i></i> </div>

css 箭头的更多相关文章

  1. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  3. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  4. 纯CSS 箭头流程,网上找的,留着备用

    无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...

  5. css箭头

    .aui-list-item-arrow:before { content: ''; width: 0.4rem; height: 0.4rem; position: absolute; top: 5 ...

  6. css 箭头三角形

    1.向下的三角形 .down{ display:inline-block; width:0px; height:0px; border-top:8px solid rgba(0, 0, 0, 0.65 ...

  7. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  8. css黑魔法

    多行文本溢出显示省略号(...)的方法 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-li ...

  9. 气泡小角的css实现

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> ...

随机推荐

  1. C# 解构

    我们以前用ref或者out在一定程度上可以解决方法只有一个返回值的问题.在C#7.0中新增了一个新元组(ValueTuple),他可以让我们返回多个值.话不多说,先上代码: 我们可以看到可以用隐式推断 ...

  2. MySQL中死锁(转)

    add by zhj: 总结一下,MySQL有主动和被动两种方式检测死锁. 主动方式:检查锁等待的图,如果有环,那就有死锁,这种情况下,会回滚事务. 被动方式:等待锁超时(即innodb_lock_w ...

  3. winform接收全局的快捷键

    public class NativeWIN32 { public NativeWIN32() { } /* ------- using WIN32 Windows API in a C# appli ...

  4. 【SQL】where 后不可以接聚合函数,都哪些是聚合函数?

    where 后不可以接聚合函数,比如函数:SUM(count),AVG(count),MIN(count),MAX(count)

  5. (1.5)MySQL表的5种分区类型

    (1.5)MySQL表的5种分区类型 关键词:mysql表分区    小细节: (1)Null 将会放入最小范围区间 (2)无论哪种类型的分区,要么没有主键.唯一键,要么分区表的主键/唯一键都必须包含 ...

  6. Jquery书写AJAX动态向页面form传数据,清空之前的数据

    三种方式: 直接代码: 1.$("#mytable tr:gt(0)").remove(); 2.$("#mytable tr:not(:first)").em ...

  7. [django]django查询最佳实战

    from django.db.models import Max, Min, Sum, Avg, Count, Q, F Django中的F和Q函数 一.F介绍 作用:操作数据表中的某列值,F()允许 ...

  8. Hyperledger Fabric CA的命令行用法

    介绍Hyperledger Fabric CA的命令行方式简单用法 Hyperledger Fabric CA由server和client两部分组成. 设置两个环境变量 export FABRIC_C ...

  9. 项目发布脚本-nodejs

    #!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin clear printf &q ...

  10. iOS 点击返回键崩溃的未解之谜

    1. iOS8出现. 2.点击进去下一层View,然后返回,再返回上一级的视图的时候奔溃. 3.只有点击进去一下层View的时候才出现. 4. 报错的是给一个未知对象发送这个消息 gestureRec ...