用纯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背景下的@font face规则
May 04 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python Requests 基础入门
2016/04/07 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python学生管理系统的实现
2020/04/05 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Python函数调用追踪实现代码
2020/11/27 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
数据库什么时候应该被重组
2012/11/02 面试题
年级组长自我鉴定
2014/02/22 职场文书
教师校本培训方案
2014/02/26 职场文书
怎样写观后感
2015/06/19 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL