CSS如何画出一个三角形

这是一个普通的 div ，一个边长为 100px 的正方形，border 宽度为 10px， 没有任何技术含量，地球人都会画。

我们知道 border 是分为 top、right、bottom、left 的，那么这个矩形的四个边是怎样划分的呢？

显然，要想公平地分割四条边框，只有这样：


所以我们如果把上、左、右三条边隐藏掉（颜色设为 transparent），会怎样呢？



呐，这就是个梯形了！感觉离革命胜利很近了是不是！
仔细观察一下这个梯形，和三角形有神马区别呢？
对！上面多了一条边！
上面这条边有什么特点呢？

它的长度 刚好等于  div 的宽度 ！

所以我们要把这个 div 的宽度缩小！
多小合适呢？
当然是 0 啦！




三角形粗来了！！！！！！！

好像太小了点，怎么把它放大捏？

很简单，我们把 border 的宽度扩大，
怎么扩大呢？
显然这条底边和上边已经没什么关系了，
上边唯一的作用就是影响三角形顶点到 div 上边缘的距离。
所以我们只需要扩大左、下、右这三条边。


下边 的 width 控制了三角形的 高 （150px）
左右两边 的 width 分别控制了三角形的 底边长的两部分 （加起来共 200px）

再举个例子，如果把右边 width 设为 0 



就是个直角三角形了~

利用相邻的两个三角形还可以拼出钝角三角形~

这是一个普通的 div ，一个边长为 100px 的正方形，border 宽度为 10px， 没有任何技术含量，地球人都会画。

我们知道 border 是分为 top、right、bottom、left 的，那么这个矩形的四个边是怎样划分的呢？

显然，要想公平地分割四条边框，只有这样：


所以我们如果把上、左、右三条边隐藏掉（颜色设为 transparent），会怎样呢？



呐，这就是个梯形了！感觉离革命胜利很近了是不是！
仔细观察一下这个梯形，和三角形有神马区别呢？
对！上面多了一条边！
上面这条边有什么特点呢？

它的长度 刚好等于  div 的宽度 ！

所以我们要把这个 div 的宽度缩小！
多小合适呢？
当然是 0 啦！




三角形粗来了！！！！！！！

好像太小了点，怎么把它放大捏？

很简单，我们把 border 的宽度扩大，
怎么扩大呢？
显然这条底边和上边已经没什么关系了，
上边唯一的作用就是影响三角形顶点到 div 上边缘的距离。
所以我们只需要扩大左、下、右这三条边。


下边 的 width 控制了三角形的 高 （150px）
左右两边 的 width 分别控制了三角形的 底边长的两部分 （加起来共 200px）

再举个例子，如果把右边 width 设为 0 



就是个直角三角形了~

利用相邻的两个三角形还可以拼出钝角三角形~