以前在公司做项目的时候遇到过要放一个三角到页面上，当时根本不懂前端，做了半天最后直接ps做了一个三角用<img>放了上去，光调line-height就花了好久。
今天看了篇文章讲怎么用css画三角，顿时茅塞顿开，也深深为以前自己的二逼感到羞愧。
不过这篇文章一没讲原理，二内容偏少，我打算做一些扩展，先上代码：
<style>
.fourC {
border: 100px solid;
border-left-color: red;
border-bottom-color: green;
border-top-color: blue;
border-right-color: yellow;
width: 0px;
}
</style>
<div class="fourC">
</div>
四色方块
可以看到一个没有宽度的div成为了一个四色的方块，最早的border宽度为盒子模型的宽度加上1px，然而由于盒子模型本身就包含border，随着border增大，整个盒子也相应的增大，最后就成为了一个四色的正方形色块。
我们发现这个正方形是由四个三角形组成的，如果我们想要一个三角形，那让其他三个看不见即可。
最简单的方法，将三个三角形的背景色设置成透明即可，看代码：
<style>
.triangle {
border: 100px solid transparent;
border-bottom-color: green;
width: 0px;
}
</style>
<div class="triangle">
</div>
一个绿意盎然的三角
将其与border的颜色设为transparent纯透明，单独设置bottom-border的颜色，就能单独留下一个三角形。
这时候还有一些不好，因为虽然border设为了透明，但是实际上还是占用了更大的空间的，此时我们可以优化一下，把顶部的border设为0，这样三角就不会额外的占据额外的顶部空间。
<style>
.triangle {
border: 100px solid transparent;
border-top: 0
border-bottom: green;
width: 0px;
}
</style>
<div class="triangle">
</div>
目前的三角形可以说勉强够用了，不过我们还能做更多，比如客制化三角的形状，思考一下三角的形状是由什么决定的。
这个三角实际上是由两个直角三角形拼出来的，两个直角三角形的直角边分别是border-left和border-bottom，border-right和border-bottom。
而三角形的形状是由三边三角决定的，这几样东西都能够通过三个border来计算出，所以只要通过简单的修改border就能改变三角形的形状，比如你减少border-left和border-right，就能画出一个偏细的三角形。
网友评论