如何用css画三角形

就是如下效果：

左边的这个三角形如果做呢？

方案一：简单粗暴，直接用图片

方式：

这个绝对地方便啊，直接将三角形的图片抠出来放进去，不管是用span承载图片然后用绝对定位来实现，还是作为一小个div的背景承载（这两种方式的布局不一样，其实要实现这个聊天框可以用好多种布局方式来实现），或者直接把这个聊天框扒下来作为背景图片，都是很方便的。

优点：

方便。

缺点：

一般图标占用资源较多，能用css解决就最好用css解决，毕竟可以节省资源。

方案二：简单不粗暴 css border来解决

方式：

一般都觉得border就是设置边框的啊，border:1px solid black;但是有没有想过，如果上下左右的border的宽度都不一样呢？

/*小三角*/
.triangle{  
    border-top: 5px solid transparent;
    border-right: 10px solid rgb(255,255,255);
    border-bottom: 5px solid transparent;
}

当我设置上边距和下边距为5px,右边距为10px,我先不设置transparent（透明），设置成红色看看：

可以看出，三角形已经出现了。然后将红色部分设置为透明即可。
当然要其他方向的角只要设置不同方向的border的宽度即可。