使用 CSS 绘制三角形

正确认识 border 形状

我们几乎从一开始使用 CSS 的时候，就接触到了 border 这个属性，但是你真的了解它吗？好吧~也许你了解，但是我得说我从一开始是不知道的。那么，border 的形状到底是什么呢？我们来看一下：

因为日常使用场景里，我们几乎只会用到宽度较窄且同色的 border，所以我一直以为 border 是一条直线。当我们将 border-width 数值调大时，可以发现每一个 border 都呈现出梯形。

如何利用 border 绘制三角形

刚才我们说到，当 border-width 很宽时，border 呈现出来的是梯形。

可是，我们不是要画三角形吗，跟梯形有什么关系？别急，继续看：

可以看到，当宽高逐渐减小时，梯形的上底边（这里指每个梯形较短的那个底边）也随之减小。当这条边的长度缩小到一个极值（也就是宽高均为 0）的时候，每条边都变成了一个三角形。

通过隐藏其它多余的边，就形成了三角形。

具体代码如下（以上图第一个为例，下同）：

width: 0; 
height: 0; 
border-width: 30px; 
border-style: solid;
border-color: #FF7F50 transparent transparent transparent;

拓展

通过以上方法我们只能画出等腰三角形，那么，其他形状的三角形怎么实现呢？

我们已经知道通过 border 绘制三角形的原理了，通过设置不同边的宽度，我们可以绘制出我们需要的各种形状的三角形。

直角三角形

代码：

width: 0;
height: 0;
border-top-color: #FF7F50;
border-width: 40px 40px 0 0;

钝角三角形

代码：

width: 0; 
height: 0; 
border-top-color: #FF7F50;
border-width: 30px 40px 10px 40px;