简介
Flutter和前端一样，采用盒模型。
前端中有用CSS，只用边框实现三角形的案例，这个可以借鉴过来
借鉴
和div类似的就是Container；
宽和高属性都设置为0；
三角形的高度就是Border宽度，底部是2倍的宽度；
上下左右4个方向，只要留一个就可以了；这个代表了三角形不同的朝向。（相反方向。比如，朝上的三角形就设置bottom）
前端CSS
div {
width: 0;
height: 0;
border: 20px solid #fff;
border-bottom-color:#ccc; // 朝上
/*border-left-color: #ccc;*/ // 朝右
/*border-right-color: #ccc;*/ // 朝左
/*border-top-color: #ccc;*/ // 朝下
}
- Flutter Dart代码
Container(
width: 0,
height: 0,
decoration: BoxDecoration(
border: Border(
// 四个值 top right bottom left
bottom: BorderSide(
color: Colors.blue, // 朝上; 其他的全部透明transparent或者不设置
width: 20,
style: BorderStyle.solid),
right: BorderSide(
color: Colors.transparent, // 朝左; 把颜色改为目标色就可以了；其他的透明
width: 20,
style: BorderStyle.solid),
left: BorderSide(
color: Colors.transparent, // 朝右；把颜色改为目标色就可以了；其他的透明
width: 20,
style: BorderStyle.solid),
top: BorderSide(
color: Colors.transparent, // 朝下; 把颜色改为目标色就可以了；其他的透明
width: 20,
style: BorderStyle.solid),
),
),
),
- 大概的样子（颜色值按照需求设置）：
设置bottom
简评
利用Boarder来设置三角形，这脑洞简直了。
虽然能实现，但是，这还是Boarder吗？
作用和名字相差十万八千里，这和编码的时候给变量命名为a，b，c之类的差不多。
虽然很新奇，作为偶尔的炫技是很好的，但是实际的使用，真的不推荐。
iOS原生的话，用贝塞尔曲线；Flutter的话用Painter；画一个出来也不是很复杂。
让UI给个图片，也是推荐的做法。
类似的还有箭头之类的，用Flutter提供的Icon，或者直接让UI给切图，才是推荐的做法。
