CSS如何画三角形

如何用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;
<