纯css创建一个三角形

第一步：先写一个border应用：

.box{
  width:100px;
  height:100px;
  border:3px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

第二步：将border值增大，此时border渲染的不是正方形而是梯形

.box{
  width:100px;
  height:100px;
  border:50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

第三步：在增加border的基础上，将宽高变为0（此时会出现四个三角形拼合成的矩形，如果只需要一个三角形，就把其他三个三角形设为不可见。）

.box{
  width:0px;
  height:0px;
  border:50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

第四步：设置透明，隐藏其中三个三角形：

.box{
  width:0px;
  height:0px;
  border:50px solid;
  border-color:transparent transparent transparent #ef4848;
}

这样就这剩下左边那个三角形。

利用逆向思维：

.box{
  width:0px;
  height:0px;
  border:50px solid transparent;
  border-left:50px solid #ef4848;
}