用纯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 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python MySQLdb使用教程详解
2018/03/20 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python tornado上传文件的功能
2020/03/26 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
考试诚信承诺书
2014/05/23 职场文书
大专毕业生求职信
2014/07/05 职场文书
大学生实训报告总结
2014/11/05 职场文书
好好学习保证书
2015/02/26 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS