仿照微信图片效果

1.最简单的方式使用clip-path直接将img截成图片气泡型。

clip-path：polygon（0% 0%，97% 0%，97%  8%，100% 13%，97% 18%，97% 100%，0% 100%）

这样存在一个问题：如果需求的图片为直角的话，这种方式很完美；但是如果要求图片为圆角的话，就会存在显示小三角的一边没有圆角，因为圆角已经被截取掉了。

有个不完美的方式可以解决一下，eg：要求图片圆角为4px，可以设被截取的一边为8px。这样图片四边都显示圆角，但是不是很对称。

---

2.同样使用clip-path，放两个img标签。第一个正常显示。可以设置图片圆角。第二个截取成小三角用绝对定位的方式将两个img拼接在一起。

clip-path：polygon（100%  50%，0 0,0 100%）

这样同样存在一个问题：圆角的问题可以解决，但是截取的位置很难定

---

3.后续用的方式为使用canvas来解决。见css文件夹中canvas实现方式

以下为学习链接：

canvas学习链接 

http://caibaojian.com/html5-canvas-arc.html 

http://blog.csdn.net/liuyan19891230/article/details/51259147 

http://www.jianshu.com/p/f77f54720202 

http://jingyan.baidu.com/article/f25ef254a06abe482c1b82e3.html

canvas

http://jingyan.baidu.com/article/0a52e3f4d42f52bf63ed7249.html