前言
想做一個類似聊天泡泡的ui組件，無奈找不到如何使用View創(chuàng)建三角形的例子齐疙。膜楷。
突發(fā)奇想，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
后續(xù)
發(fā)現了個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
