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"> ...
随机推荐
- Django+Celery 执行异步任务和定时任务
celery是一个基于python开发的简单.灵活且可靠的分布式任务队列框架,支持使用任务队列的方式在分布式的机器/进程/线程上执行任务调度.采用典型的生产者-消费者模型,主要由三部分组成: 1. 消 ...
- mysql之索引简介
索引分类 mysql在存储数据时,是按着主键的顺序存储的.主键索引是物理索引,其他索引都是逻辑索引. 普通索引 普通索引是最基本的索引,没有任何限制的索引,普通索引列的数据可以重复.其唯一的任务就是加 ...
- 20165336 2017-2018-2 《Java程序设计》第5周学习总结
20165336 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 内部类的类体中不可以声明类变量和类方法. 内部类仅供他的外嵌类使用,其他类不可以用某个类的内 ...
- java 线程 (三)线程并发的安全性 同步代码块
package cn.sasa.demo1; import java.util.concurrent.ExecutionException; public class ThreadDemo { pub ...
- SpringBoot-整合多数据源
整合多数据源 这里有两种,分包数据源和注解数据源,这里讲分包数据源 配置文件中新增两个数据源 spring.datasource.test1.driverClassName = com.mysql.j ...
- Magento2与Magento1的区别有哪些
magento2是15年正式上线的正式版,框架和写法跟magento1有很大区别,用到了命名空间和composer,模块化设计更强.因为是刚出生不久 所以bug比较多.目前全世界做magento2的公 ...
- WIN32,_WIN32_WIN64
MSDN 里说,VC 有 3 个预处理常量,分别是 _WIN32,_WIN64,WIN32. 只要包含了 Windows.h,那么 WIN32 常量是肯定定义了的,所以不能用于判断平台环境(如果x64 ...
- 以太坊中的账户、交易、Gas和区块Gas Limit等概念
什么是账户 以太坊账户与我们所知的账户概念有一定相似之处,却又有很大的区别,更不同于比特币中UTXO. 账户分两类: - 外部拥有账户(EOA),也就是普通账户 - 合约账户 普通账户 所谓的普通账户 ...
- VirtualBox修改现有VDI虚拟磁盘大小
之前创建的虚拟磁盘10G,现需要更大的空间,而又不想使用新增虚拟磁盘的方法. 通过查看资料发现VirtulBox提供的VBoxManage modifyhd命令可以解决,该命令的具体用法: VBoxM ...
- Hybrid设计--核心交互
普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现.拒绝用a和window.location.如果我想对所有跳转做一个处理,开动画或者对跳转 ...