【前端】不使用图片制作三角小图标

我的第一篇博客，希望大家多多支持！

方法一：使用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  咱们一起讨论吧！！