前端怎么画三角形_如何用CSS画三角形

1.前言

在博主某次前端面试过程中，被问到如何用css画一个三角形？相信很多朋友在面试中也被问到过这个问题，并且网上针对这个问题也有非常多的解决方案，大部分都是采用border来实现，经过我一番搜索，发现讲具体实现的代码的很多，但是讲实现原理的几乎没有(也可能是我没有找到)，下面，我就谈谈利用border画三角形其内部的原理。

2.原理

2.1 第一步

首先，先来一个div，然后给这个div加一层border，并且给上下左右border分别加上不同颜色，以便观察，代码和效果如下：

.trangle{width:100px;height:100px;border:100px solid #000;border-top-color:red;border-bottom-color:yellow;border-left-color:blue;border-right-color:green;

}

2.2 第二步

接着，将这个div的width变为0，我们再来看看效果。可以看到，由于div的宽度变成了0，左右两边的border“吸”在了一起，同时上下的border变成了三角形，好像快要完成了，别急，再看看第三步。

.trangle{width:0px;height:100px;border:100px solid #000;border-top-color:red;border-bottom-color:yellow;border-left-color:blue;border-right-color:green;

}