.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. Django + Redis实现页面缓存

    目的:把从数据库读出的数据存入的redis 中既提高了效率,又减少了对数据库的读写,提高用户体验. 例如: 1,同一页面局部缓存,局部动态 from django.views import View ...

  2. Servlet----------Servlet 概述

    1.什么是Servlet Servle t是Java Web 的三大组件之一,它属于动态资源.Servlet 的作用是处理请求,服务器会把接收到时的请求交给 Servlet 来处理,在Servlet中 ...

  3. max_allowed_packet引起同步报错处理

    一台MySQL的Cat数据库,每天早上1点定期删除,有4个表,删除完后,这4个表都有blob字段,很大量,部署删除job就同步报错. Got fatal error 1236 from master ...

  4. visual tudio 2017--发布

  5. 创建数据表,自定义data element, field等。

    参考:https://wenku.baidu.com/view/253ddbfaa5e9856a561260da.html 一:创建域. 使用T-CODE 11 搜索 数据操作系统. 选择domain ...

  6. 银联卡中关于CVN/CVN2/ICVN的区别

    银联China Union Pay,是中国唯一合法的卡组织机构,同时也是EMVCo成员.关于银联卡中CVN/CVN2/ICVN的区别,刚开始我自己不了解,但经过查找资料和请教其他人,对它们的概念也渐渐 ...

  7. openshift 容器云从入门到崩溃之二《准备环境》

    openshift 从3.9开始就开始支持系统组件在容器里运行了,之前版本都是直接运行在操作系统上,名字也改了叫OKD 目前最新的稳定版本是3.11,所以就安装3.11版本 准备环境: 主机名 系统 ...

  8. Nginx参数调优

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  9. 一个简单的sel server 函数的自定义

    创建自定义函数:use 数据库名gocreate function 函数名(@pno int)returns intasbegin  declare @a int   if not exists(se ...

  10. python demjson

    这个是第三方的json库 首先安装 http://deron.meranda.us/python/demjson/ demjson-2.2.4.tar.gz #tar -xzf demjson-2.2 ...