转载请标明出处：https://blog.csdn.net/weixin_42405014/article/details/119926917

解决办法

1. 美工同事切三角形图片icon
2. 自己使用ps或者其他工具画出三角形并导出使用
3. 纯css写一个三角形（类似Android中.xml文件实现三角形drawable）

实施

以上方法1 2就不做多余的赘述了。ps画三角形比较简单，只要注意尺寸，不要让图片显示出来太模糊即可。
今天主要是介绍第三种方法----纯css三角形绘制方法，具体代码如下：

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

这种写法可以保证这个三角形作为bg的时候不会模糊甚至出现方块。需要的小伙伴可以借鉴一下。