还在为小三角形切图？使用纯CSS写一个简单的三角形_html/css_WEB-ITnose

　　或者这样：

　　我的内心其实是拒绝的-_-；但工作还得干，大部分同学会写

        
        添加会计

　　或者干脆利落

        
        添加会计

　　这样做是可以解决问题的，但是为了这个一个小小的小尖尖，我们还要大费周章的去切（很少同学能享受到美工给制作的sprite图片），如果遇到的设计图不是分层的或者设计软件都不熟的话是很郁闷的https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/..

　　其实有一种简单的方法可以搞定这种小尖尖，大家请看：

                添加会计

　　这就涉及到border的问题，如果一个元素的宽度设为0，border-width却为大于0的数，结果是会出现一个正方形（每个边会成为一个等边直角三角形），如果设置border-color为上右下左不同的四种颜色，结果就会出现一个由四个等边三角形构成的正方形！

　　这样大家不难想到，如果把某三个边的颜色设为透明，我们就能得到一个任意颜色的三角形了。

　　然后我们将这个元素，例如标签，设置定位为相对定位，调整其top和left的值，即可轻易得到一个用css写的小尖尖。