【css学习笔记】理解利用css的border属性制作三角形的原理

css中有很多东西咋一看觉得非常简单，容易上手使用，但随着逐步深入了解之后才会恍然觉得自己并没有理解其中的真正含义。比如利用border属性制作三角形的原理。

1、用最简单的代码实现一个盒子，并为其设置宽度、高度和border，并未border的四条边设置不同的颜色：

2、假如将盒子的宽度设置为0px：

3、同理设置盒子的高度为0px：

4、到这一步似乎有了一些灵感，将其中一边的border颜色设置为transparent(透明)：

5、同理尝试将其他两条边的border颜色设置为transparent，就得到了一个三角形。

6、将不同边的颜色设置为transparent，就可以得到朝向不同方向的三角形：

7、将相邻两条边进行组合还可以得到不同朝向的直角三角形：

至此就完成了一个利用border属性完成的三角形。