css画三角形

大概是最细致的css画三角形的教程了。almost最细致。
网页制作过程中，有时候我们需要制作一些小三角之类的家伙来充门面，比方说下图中的小家伙，初出茅庐想搞出这么个家伙来真的很是苦恼，所以，有了这篇文章。看完之后，各种三角形分分钟手到擒来，出不来算我输。

隐藏着黑暗力量的小三脚形哦，请赋予我没有bug的力量吧

废话到此，开始实操

第一步 先祭出你的div

随便的编辑器新建个html的页面直接在body里面随手写个

然后在body中加个

先别急，复制进去，咱们一点点分析这段话是怎么来的。
首先粘贴完成保存打开浏览器一口气下来就会看到这么个黑家伙。

黑黑的三角形

这时候这位看官就要问了：敢问这个黑家伙是怎么来的呢？
这位看官问的好，咱们一步一步把他搞出来看看。
首先，咱们先试试看，将这个div盒子的 width和 height都给丫设置出来。让丫藏起来，弄出来打一顿。再给丫加个边框，弄他100像素，一个小胖子从此诞生。
代码如下：

这时候就考察眼力了。这里有个知识点。盒子的边框不是直线，而是一个一个的梯形。下图中有4个梯形，你找到了吗？

请找到四个梯形

现在咱们将这个胖家伙的三个边框通过修改颜色透明隐藏掉，看看你找对梯形了没有。
代码又如下：

代码保存之后成了这样：

一个小山丘

原来是四个边框，现在只剩下下边框。为什么呢？因为“上右下左”的顺序，我们将“上右左”边框的颜色设置成了transparent，透明的。

原来是这样的四个梯形

它已经很接近三角形了，怎么让它成三角形呢？目前这种情况，干掉div的宽度就可以了。
代码又又又如下:

如图

山头被削尖了

同理，我们目前已经可以做出四种三角形了。但是这还不过瘾。因为还有本文首图这种三角形存在：

惊世骇俗的小直角

没想到按照教程做了半天不是这位直角三角大哥，敢问这大哥又是怎么来的呢？
这时候我们就可以对比目前的代码和本文首图配套的代码了。我们修改了 border-width的值。依旧是“上右下左”的顺序，但是这里的上右下左是指的div到边框最外边的距离。也就下图所示的这个距离。虽然div宽度没了，但是它还应该存在我们的心里。原点一般的重要角色。
依旧是代码：

距离产生美

这时候细心的你又发现问题了，为啥这段代码跟文章一开始的代码不同？
因为我们切的是不一样的位置，但是出现的是同种三角形。聪明的你去尝试修改 border-width和 border-color找到真理吧。

愿春节将近，不用加班。

第二步 懒得写就用生成器生成吧

没有彩蛋怎么算过年，附上一枚懒人神奇，一秒钟出三角形，堪比渣渣辉：
css三角形生成器

不要骂我，学习使我快乐。