用纯CSS3实现网页中常见的小箭头


Posted in HTML / CSS onOctober 16, 2017

用纯CSS3实现网页中常见的小箭头,实现代码如下所示:

/* css3三角形(向上 ▲) */
div.arrow-up {
 width:0px;
 height:0px;
border-left:5px solid transparent;  /* 右透明 */
 border-right:5px solid transparent; /*右透明 */
  border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */
  font-size:0px;
  line-height:0px;
}
/* css3三角形(向下 ?) */
div.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
/* css3三角形(向左) */
div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* css3三角形(向右) */
div.arrow-rightright {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

总结

以上所述是小编给大家介绍的用纯CSS3实现网页中常见的小箭头,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
 

HTML / CSS 相关文章推荐
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
css3 pointer-events 介绍详解
Sep 18 #HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 #HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 #HTML / CSS
You might like
php 归并排序 数组交集
2011/05/10 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
跟混乱的页面弹窗说再见
2019/04/11 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python里glob模块知识点总结
2021/01/05 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
中学教师教育感言
2014/02/21 职场文书
考试诚信承诺书
2014/05/23 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
爱国主题班会教案
2015/08/14 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL