用纯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 相关文章推荐
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 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
zend framework多模块多布局配置
2011/02/26 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP面向对象概念
2011/11/06 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
面向对象设计模式的核心法则
2013/11/10 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
JS实现可视化文件上传
2018/09/08 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python使用opencv读取图片的实例
2017/08/17 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
数学国培研修感言
2014/02/13 职场文书
保密普查工作实施方案
2014/02/25 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
革命电影观后感
2015/06/18 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis