用纯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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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文件上传实例详解!!!
2007/01/02 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
jquery时间下拉框小例子
2013/04/15 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python word转pdf代码实例
2019/08/16 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python里glob模块知识点总结
2021/01/05 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
化学系大学生自荐信范文
2014/03/01 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
投标承诺函范文
2015/01/21 职场文书
导师工作推荐信
2015/03/27 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书