css 箭头
.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 箭头的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- 纯CSS 箭头流程,网上找的,留着备用
无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...
- css箭头
.aui-list-item-arrow:before { content: ''; width: 0.4rem; height: 0.4rem; position: absolute; top: 5 ...
- css 箭头三角形
1.向下的三角形 .down{ display:inline-block; width:0px; height:0px; border-top:8px solid rgba(0, 0, 0, 0.65 ...
- 用CSS绘制箭头等三角形图案 [译]
最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...
- css黑魔法
多行文本溢出显示省略号(...)的方法 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-li ...
- 气泡小角的css实现
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> ...
随机推荐
- JavaWeb开发如何用Tomcat部署发布
一.如何安装TomCat 1.1安装包下载地址:https://tomcat.apache.org/download-70.cgi 1.2 安装exe文件,下一步直到安装成功.并启动Tomcat服务 ...
- POJ1845 sumdiv 数论
正解:小学数学数论 解题报告: 传送门! 其实不难但我数学这个方面太菜了所以还是多写点儿博客趴QAQ 然后因为是英文的所以先翻译一下,,,? 大概就是说求AB的所有约数之和,对9901取膜 这个只需要 ...
- mysql 权限管理 目录
mysql 权限管理介绍 mysql 权限管理 记录 mysql 权限管理 grant 命令 mysql 权限管理 revoke 回收权限 命令 mysql 权限管理 针对库 授权 db.* mysq ...
- OC屏幕手势解锁
感觉屏幕解锁好像很牛的样子,所以试着写了一个,代码很简单,手势用到的也是原生的,如果该代码帮助了你,记得点赞,如果该代码有任何问题,也可以随时和我联系.改代码用到的两张图片,是我随便找的两张,可以自行 ...
- Python3学习之路~5.3 random模块
random模块常用方法: import random # 随机数 print(random.random()) # 生成一个0到1的随机浮点数,0 <= n < 1.0 print(ra ...
- Centos7安装Openvpn
前言 搭建openvpn主要参考这篇博客,原文传送: http://www.jianshu.com/p/4bbf946222d5 所以你会发现步骤基本一样. 安装openvpn A:安装EPEL仓库 ...
- 定义结构体和table type
1: 在se11 中创建结构体 2: 定义一个内表, row type 使用structure类型,将会具有structure的字段. 3:在代码中 使用 结构体和table type *& ...
- C 逗號表達式 與返回值
逗號表達式的返回值是最後一個表達式的值 int z; z=(,); printf("%d\n",z);//6 int a; printf(*,a*,a+));//20 a=3*5, ...
- Tf中的NCE-loss实现学习【转载】
转自:http://www.jianshu.com/p/fab82fa53e16 1.tf中的nce_loss的API def nce_loss(weights, biases, inputs, la ...
- 【Java】-NO.11.Java.1.Log4j.1.001-【Log4j Manual】-
1.0.0 Summary Tittle:[Java]-NO.11.Java.1.Log4j.1.001-[Log4j2 Manual]- Style:Java Series:Log4j Since: ...