如何实现一个纯css的三角形

先上代码

效果如图，想要哪个方向的三角形，把其他方向的boder-color设置为transparent即可。

.sjx{
      width: 0px;
      height: 0px;
      border-width: 40px;
      border-style: solid;
      border-color: red blue yellow purple;
      overflow: hidden;
    }

为什么通过这种方式能够实现三角形的效果呢？

原理就是，盒模型上下左右的border交界处，会呈现平滑的斜线。

简单理解就是，border重合的部分，会根据border-width的值得大小，对90°角进行分割。如果border-width相同，那就45°线分割，结果就是个上图呈现出来的等腰三角形。

各种三角形与梯形

利用根据border-width的值得大小，对90°角进行分割的特点，我们又可以用css实现不同形状的三角形。

调节border和border-width的值，还能实现各种各样的梯形。

.sjx{
  width: 0px;
  height: 0px;
  border-width: 40px 40px 10px 10px;
  border-style: solid;
  border-color: red blue yellow purple;
  overflow: hidden;
}

.sjx{
  width: 100px;
  height: 0px;
  border-width: 40px;
  border-style: solid;
  border-color: red blue yellow purple;
  overflow: hidden;
}