前言
想做一个类似聊天泡泡的ui组件，无奈找不到如何使用View创建三角形的例子。。
突发奇想，css3可以通过更改样式，使一个div变成三角形，那么我们是不是也可以借鉴以下实现方法，然后移植到rn上？
开干
说干就干，首先搜集以下使用css3绘制三角形的教程，很多：
纯CSS绘制三角形（各种角度）
核心代码：
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
这样就实现了一个三角形的效果，如图：
image.png
分析
经过代码的分析，可以看到，实现流程为：
- 设置左边的border宽度50，背景透明；
- 设置右边的border宽度50，背景透明；
- 设置底部的border宽度100，背景颜色自定义，也就是最终显示的颜色；
所以就好办了，我们想让箭头在上，就设置左右宽度低一点，底部大一点。同理，设置箭头在左，就设置上下少，右边多。
转换
好了，我们该把代码转换成rn支持的样式了，很简单！
<View style={{
width: 0,
height: 0,
borderColor: 'transparent',
borderTopWidth: 7,
borderBottomWidth: 7,
borderRightWidth: 10,
borderRightColor: '#79bd9a'
}} />
设置上下越大，三角就越不尖。。
效果
是时候上个效果图了：
Screen Shot 2017-12-14 at 18.01.19.png
后续
发现了个bug:在android上效果不显示..
正在修复中，日后更新，敬请留意
修复
嗯，再查找一番，深入了解原理后：
用纯css3绘制三角形的原理
终于找到了两个平台通用的代码！
最终结果如下：
<View style={{
width: 0,
height: 0,
borderTopWidth: 10,
borderTopColor: 'transparent',
borderRightWidth: 10,
borderRightColor: '#79bd9a',
borderLeftWidth: 5,
borderLeftColor: 'transparent',
borderBottomWidth: 10,
borderBottomColor: 'transparent',
}} />
效果：
Screen Shot 2017-12-14 at 18.39.49.png
原文地址：https://www.jianshu.com/p/ed14e5bf95bc
