.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. P4827 [国家集训队] Crash 的文明世界

    传送门:洛谷 题目大意:设$$S(i)=\sum_{j=1}^ndis(i,j)^k$$,求$S(1),S(2),\ldots,S(n)$. 数据范围:$n\leq 50000,k\leq 150$ ...

  2. 关于mobilesroll使用方法的再次声明

    js $('#name').click(function(valueText) { $('#demo').mobiscroll('show'); // return false; }); $(&quo ...

  3. js篇-json字符串与json对象相互转化

    回调返回结果是 json字符串还是json对象一定要看清楚哦,状态不好的时候,感觉眼神也不好使了, var a = "{"name":"jenny", ...

  4. maven 转myeclipse eclipse 项目 命令

    我们在网上下载的开源Maven工程想要转换成Eclipse能够识别的工程,需要执行如下命令: Jar工程: mvn eclipse:eclipse 或 mvn eclipse:myeclipse We ...

  5. axios的使用

    一.首先要安装axios npm install axios 使用: -先在main中配置: import axios from 'axios' //要把axios放进一个全局变量中 //把axios ...

  6. Jsp与Servlet面试题

    一.jsp有哪些内置对象作用分别是什么  答:JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): request  用户端请求,此请求会包含来自GET/POST请求的参数  respo ...

  7. NN中的激活函数【转载】

    转自:https://blog.csdn.net/edogawachia/article/details/80043673 1.sigmoid 特点:可以解释,比如将0-1之间的取值解释成一个神经元的 ...

  8. gluster 卷的类型及创建方法

    基本卷: 分布式卷 文件随机分布在brick中,提升读写性能 不提供数据冗余,最大化利用磁盘空间 # gluster volume create test-volume server1:/exp1 s ...

  9. spring的面向切面实现的两种方式

    面向切面:主要应用在日志记录方面.实现业务与日志记录分离开发. spring面向切面有两种实现方式:1.注解 2.xml配置. 1.注解实现如下: (1)配置如下: <?xml version= ...

  10. 【LeetCode每天一题】Multiply Strings(字符串乘法)

    Given two non-negative integers num1 and num2 represented as strings, return the product of num1 and ...