大概是最细致的css画三角形的教程了。almost最细致。
网页制作过程中，有时候我们需要制作一些小三角之类的家伙来充门面，比方说下图中的小家伙，初出茅庐想搞出这么个家伙来真的很是苦恼，所以，有了这篇文章。看完之后，各种三角形分分钟手到擒来，出不来算我输。
隐藏着黑暗力量的小三脚形哦，请赋予我没有bug的力量吧
废话到此，开始实操
第一步 先祭出你的div
随便的编辑器新建个html的页面直接在body里面随手写个<div class="test"></div>
然后在body中加个
<style>
.test{
width: 0px;
height: 0px;
border-color: transparent black;
border-style: solid;
border-width: 100px 100px 0px 0px;
}
</style>
先别急，复制进去，咱们一点点分析这段话是怎么来的。
首先粘贴完成保存打开浏览器一口气下来就会看到这么个黑家伙。
黑黑的三角形
这时候这位看官就要问了：敢问这个黑家伙是怎么来的呢？
这位看官问的好，咱们一步一步把他搞出来看看。
首先，咱们先试试看，将这个div盒子的
width和height都给丫设置出来。让丫藏起来，弄出来打一顿。再给丫加个边框，弄他100像素，一个小胖子从此诞生。代码如下：
<style>
.test{
width: 10px;
height: 10px;
border-style: solid;
border-width: 100px 100px 100px 100px;
}
</style>
这时候就考察眼力了。这里有个知识点。盒子的边框不是直线，而是一个一个的梯形。下图中有4个梯形，你找到了吗？
请找到四个梯形
现在咱们将这个胖家伙的三个边框通过修改颜色透明隐藏掉，看看你找对梯形了没有。
代码又如下：
<style>
.test{
width: 10px;
height: 10px;
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: transparent transparent transparent black;
}
</style>
代码保存之后成了这样：
一个小山丘
原来是四个边框，现在只剩下下边框。为什么呢？因为“上右下左”的顺序，我们将“上右左”边框的颜色设置成了transparent，透明的。
原来是这样的四个梯形
它已经很接近三角形了，怎么让它成三角形呢？目前这种情况，干掉div的宽度就可以了。
代码又又又如下:
<style>
.test{
width: 0px;
height: 10px;
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: transparent transparent transparent black;
}
</style>
如图
山头被削尖了
同理，我们目前已经可以做出四种三角形了。但是这还不过瘾。因为还有本文首图这种三角形存在：
惊世骇俗的小直角
没想到按照教程做了半天不是这位直角三角大哥，敢问这大哥又是怎么来的呢？
这时候我们就可以对比目前的代码和本文首图配套的代码了。我们修改了
border-width的值。依旧是“上右下左”的顺序，但是这里的上右下左是指的div到边框最外边的距离。也就下图所示的这个距离。虽然div宽度没了，但是它还应该存在我们的心里。原点一般的重要角色。依旧是代码：
<style>
.test{
margin: 0 auto;
width: 0px;
height: 10px;
border-style: solid;
border-width: 0px 0px 100px 100px;
border-color: transparent transparent black transparent;
}
</style>
距离产生美
这时候细心的你又发现问题了，为啥这段代码跟文章一开始的代码不同？
因为我们切的是不一样的位置，但是出现的是同种三角形。聪明的你去尝试修改
border-width和border-color找到真理吧。
愿春节将近，不用加班。
第二步 懒得写就用生成器生成吧
没有彩蛋怎么算过年，附上一枚懒人神奇，一秒钟出三角形，堪比渣渣辉：
css三角形生成器
不要骂我，学习使我快乐。
网友评论