.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. Java+Selenium 常见问题QA

    一:日期控件二:上传控件三:页面隐藏元素四:弹出窗口的处理五:富文本框编辑器六:元素高亮 一:日期控件selenium不能直接对日期控件操作,可以通过js对日期控件做赋值操作 WebElement i ...

  2. windows版本下ELK配置

    windows版本的es和kibana相对配置起来很简单,网上已经有很多例子都是正确的,只需按照步骤安装一下即可. 主要logstash,网上说的方案,大都不能配置成功,或者总有一些错误,下面把我自己 ...

  3. IIS下实现帝国CMS搜索页伪静态

    前面ytkah讲了apache下帝国CMS搜索页伪静态实现方法,网友说服务器是用IIS,那么IIS下如何实现帝国CMS搜索页伪静态呢?首先得先有URL重写插件,下载地址:http://www.iis. ...

  4. Codefoces 432C Prime Swaps(数论+贪心)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/26094917 题目连接:Codefoces ...

  5. centos mysql 实战 第一节课 安全加固 mysql安装

    centos mysql  实战  第一节课   安全加固  mysql安装 percona名字的由来=consultation 顾问+performance 性能=per  con  a mysql ...

  6. 1 认识开源性能测试工具jmeter

    典型的性能测试工具主要有2个,Load Runner和jmeter.Load Runner是商业化的,Jmeter是开源的.下面我们认识一下开源性能测试工具jmeter. 1.jmeter是什么? A ...

  7. JS中函数表达式与函数声明的区别

    hello,沐晴又来更新啦,今天呢,跟大家讲讲让人头疼的函数表达式和函数声明,反正我当初看那本高级程序的时候,是没怎么看太透,哈哈.我是个比较重基础的人,跟我一起探讨函数表达式和函数声明的世界吧. 首 ...

  8. 系统进不去怎么办?教你利用bootice工具引导修复系统

    http://sh.qihoo.com/pc/9c2e9690a82b8cd38?sign=360_e39369d1 U盘装机大师下载地址 http://www.upandashi.com/down/

  9. nginx_tcp模块集成到openresty(安装ngx_tcp_lua_module模块)

    git地址:https://github.com/bigplum/nginx-tcp-lua-module openresty 本身是使用http协议进行通讯的, 但是项目中经常有要求输入是使用tcp ...

  10. 拖拽控件java版

    Button vv = new Button("vvvv");  DragSource.getDefaultDragSource().createDefaultDragGestur ...