怎么用CSS画一个三角形（原理，代码）

方法：让一个容器不限制宽高，并且用元素边框的大小控制三角形大小

原理

在以前知道可以用CSS画三角形时，一直在思考一件事情，用边框画三角形。边框？边框不是一条直线吗？为什么能画出三角形。

后来才了解到，盒子的每条边框其实都是一个梯形。

那为什么梯形能够做成三角形呢？

因为当盒子的width和height都为0时，运用数学的极限思想，当内容无限趋近于0的时候，每个边的边框就是一个三角形了

此时，我们注意到，如果把其他三条边框的颜色变成透明的，那么剩下的有颜色的边框，就是一个三角形了。

Code

方向三角，箭头指向（上、下、左、右）

1.箭头指向哪，哪个方向的边框就不设置

2.箭头指向的反向边框，设置为你想要的箭头颜色

3.比如该例子，【上箭头】，那么【没有上边框】，并且【下边框】的颜色设置为你想要的箭头颜色

顶角

你可以想象成是由两个三角形拼成的。

1.上顶角，颜色设置在上。下顶角，颜色z设置在下。

2.左右不设置颜色，左（上、下），就设置右边框。右（上、下），就设置左边框。