【前端】不使用图片制作三角小图标
2016-01-18 18:03
561 查看
我的第一篇博客,希望大家多多支持!
方法一:使用HTML特殊字符
HTML提供了很多好用的特殊字符,这样的字符像文字一样定制大小颜色,非常方便
1,向下的图标 ▼ ▼
2,向上的图标 ▲ ▲
3,向右的图标 ► ►
4,向左的图标 ◄ ◄
方法二:使用css制作小图标
使用HTML+CSS相比特殊字符更加灵活,可以制作你想要的角度和比例,以下是制作方法:
HTML:
对应的css:
还可以做这样的三角哦:
对应的HTML:
对应的css:
方法三:使用canvas制作小图标
HTML5推出了强大的canvas,他可不止是画三角的,我们这节讲的是画三角哦,好吧我就用它画个三角,效果如下:
方法四:svg制作
方法五:使用图标字体制作
这个方法的原理跟特殊字体是一样的,就是将小图标制作成字体包,用css的font-face引入进来
这个方法适用所有页面icon,我推荐的工具是 阿里的 iconfont,不过也有很多优秀图标字体库,都可以使用。
你在工作中遇到什么困难或前端方面的问题欢迎加我的群 :229448745 咱们一起讨论吧!!
方法一:使用HTML特殊字符
HTML提供了很多好用的特殊字符,这样的字符像文字一样定制大小颜色,非常方便
1,向下的图标 ▼ ▼
2,向上的图标 ▲ ▲
3,向右的图标 ► ►
4,向左的图标 ◄ ◄
方法二:使用css制作小图标
使用HTML+CSS相比特殊字符更加灵活,可以制作你想要的角度和比例,以下是制作方法:
HTML:
<div class="triangle-up"></div> <div class="triangle-right"></div> <div class="triangle-bottom"></div> <div class="triangle-left"></div>
对应的css:
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /*更改底部大小还能改变三角的高度哦*/ } .triangle-right{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; } .triangle-bottom { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } .triangle-left{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid red; }
还可以做这样的三角哦:
对应的HTML:
<div class="triangle-topleft"></div> <div class="triangle-topright"></div> <div class="triangle-bottomright"></div> <div class="triangle-bottonleft"></div>
对应的css:
.triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } .triangle-topright{ width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } .triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } .triangle-bottonleft{ width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }
方法三:使用canvas制作小图标
HTML5推出了强大的canvas,他可不止是画三角的,我们这节讲的是画三角哦,好吧我就用它画个三角,效果如下:
<canvas id="triangle" width="300" height="150"></canvas> <script> window.onload = function(){ var triangle = document.getElementById('triangle'); var ctx = triangle.getContext('2d'); ctx.fillStyle = '#f00'; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,0); ctx.lineTo(150,150); ctx.closePath(); ctx.fill(); } </script>
方法四:svg制作
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="150,0 300,150 0,150" style="fill:red;stroke:black;stroke-width:1"/> </svg>
方法五:使用图标字体制作
这个方法的原理跟特殊字体是一样的,就是将小图标制作成字体包,用css的font-face引入进来
这个方法适用所有页面icon,我推荐的工具是 阿里的 iconfont,不过也有很多优秀图标字体库,都可以使用。
你在工作中遇到什么困难或前端方面的问题欢迎加我的群 :229448745 咱们一起讨论吧!!
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析